如何在fabricJS中透明蒙版?

时间:2016-03-24 06:53:26

标签: javascript jquery canvas html5-canvas fabricjs

我需要在保存之前移除蒙版。如何透明面膜?

这是保存功能。

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

1 个答案:

答案 0 :(得分:0)

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