Скрыть фон в FabricJS перед экспортом Изображение

Question

Я пытаюсь найти лучший способ приблизиться к этому? по нажатию кнопки изображение будет загружаться в фоне fabricjs холста ...

У меня есть еще одна кнопка, которая сохраняет dataURL в PNG ... Я пытаюсь скрыть фоновое изображение перед сохранением ...

Прямо сейчас я привязал прослушиватель событий к фоновому изображению, чтобы скрыть себя при нажатии кнопки экспорта, но фоновое изображение не скрывается до того, как изображение будет экспортировано ... Каким образом можно заказать выполнение события?

$("#export-image").click(function() { 
    canvas.deactivateAll().renderAll(); 
    window.open(canvas.toDataURL('png')); 
}); 


$('.background-img').on('click', function(e) { 
    var imgURL = "http://placehold.it/350x150"; 
    $.ajax({ 
    url: imgURL, 
    success: function(result) { 
     fabric.Image.fromURL(imgURL, function(img) { 
      $("#export-image").click(function() { 
       img.setOpacity(0); 
       canvas.renderAll(); 
      }); 
      img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'}); 
      canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas)); 
       }); 

      } 
    }); 

}); 

Answer 1

Я бы подошел с событием fabricjs вместо события dom.

Как вы это сделали, функция, которая экспортирует экспорт данныхURUR, регистрируется перед функцией, которая скрывает изображение. Также задание непрозрачности 0 означает, что изображение в настоящее время отображается просто с прозрачным. Пустая трата времени.

Вам не нужно вызывать renderAll, перед toDataURL, который будет вызывать его самостоятельно.

Я хотел бы остаться с одним событием щелчка, и я хотел бы использовать fabricjs события:

var bgImage; 

function hideBg() { 
    //i would not use setOpacity, this will make 
    //it render transparent. wasted time. 
    //canvas.backgroundImage.setOpacity(0); 
    bgImage = canvas.backgroundImage; 
    canvas.backgroundImage = null; 
} 

function showBg() { 
    canvas.backgroundImage = bgImage; 
} 

$("#export-image").click(function() { 
    canvas.on('before:render', hideBg); 
    canvas.on('after:render', showBg); 
    canvas.deactivateAll(); 
    window.open(canvas.toDataURL('png')); 
    canvas.off('before:render', hideBg); 
    canvas.off('after:render', showBg); 
}); 


$('.background-img').on('click', function(e) { 
    var imgURL = "http://placehold.it/350x150"; 
    $.ajax({ 
    url: imgURL, 
    success: function(result) { 
     fabric.Image.fromURL(imgURL, function(img) { 
      img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'}); 
      //let's save an handler just in case we mess up order in hide and show. 
      bgImage = img 
      canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas)); 
     }); 
     } 
    }); 
});