导出图像之前在 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 事件。

你是如何做到的，执行 dataURL 导出的函数在隐藏图像的函数之前注册。另外，将不透明度设置为 0 意味着图像当前仅使用透明渲染。浪费时间。

您不需要在 toDataURL 之前调用 renderAll，它将自行调用它。

我会保留一键事件，并使用 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));
         });
      }
   });
});