如何在fabricJS中透明遮罩

How to transparent mask in fabricJS?

本文关键字：透明 fabricJS      更新时间：2023-09-26

我需要在保存之前移除掩码。如何透明口罩？

这是保存功能。

    $(document).on('click','#btn-save-canvas', function(event) {

    if (!fabric.Canvas.supports('toDataURL')) {
      alert('This browser doesn''t provide means to serialize canvas to an image');
    }
    else {
        canvas.overlayImage.filters = [];
        canvas.overlayImage.applyFilters();
        canvas.renderAll();
        var multi = maskOriWidth/maskWidth;     // Set to original scale
        window.open(canvas.toDataURL({
          format: 'png',
          multiplier: multi,
          left: (canvas.width - maskWidth)/2,
          height: maskOriHeight/multi,
          width: maskOriWidth/multi
        }));
    }
});

我认为这可以通过将opacity设置为0来实现。要恢复不透明度，可以将opacity设置为1，如下所示。

$(document).on('click','#btn-save-canvas', function(event) {

if (!fabric.Canvas.supports('toDataURL')) {
  alert('This browser doesn''t provide means to serialize canvas to an image');
}
else {
    canvas.overlayImage.filters = [];
    canvas.overlayImage.applyFilters();
    mask.opacity = 0;
    canvas.renderAll();
    var multi = maskOriWidth/maskWidth;     // Set to original scale
    window.open(canvas.toDataURL({
      format: 'png',
      multiplier: multi,
      left: (canvas.width - maskWidth)/2,
      height: maskOriHeight/multi,
      width: maskOriWidth/multi
    }));
    mask.opacity = 1;   //Show mask
    canvas.renderAll();
}
});
相关文章：