在导出图像之前隐藏FabricJS中的背景

Hide Background in FabricJS before exporting Image

本文关键字：FabricJS 背景 隐藏 图像      更新时间：2023-09-26

我正在尝试找出解决此问题的最佳方法？ 单击按钮时，图像将加载为FabricJS画布的背景...

我还有另一个按钮可以将数据URL保存到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));
              });
          }
    });
});

我会用一个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));
         });
      }
   });
});
相关文章：