如何在fabricJS中透明蒙版？

【问题标题】：How to transparent mask in fabricJS?如何在fabricJS中透明蒙版？
【发布时间】：2016-07-11 17:12:49
【问题描述】：

我需要在保存之前移除遮罩。怎么做透明面膜？

这里是保存功能。

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

【问题讨论】：

标签： javascript jquery canvas html5-canvas fabricjs

【解决方案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();
}
});

【讨论】：