如何在 fabricJS 中透明蒙版？

Question

我需要先取下面具才能保存。如何做透明面膜？

这里是保存函数。

    $(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
        }));
    }
});

Answer 1

我认为这可以通过将 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();
}
});

如何在 fabricJS 中透明蒙版？

How to transparent mask in fabricJS?

javascript

jquery

canvas

html5-canvas

fabricjs