如何在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(); 
} 
});