预保存编辑fabric.js PNG图像

Question

我目前正在为客户开发一个界面，该界面将允许客户创建PNG图片以供进一步使用：

在fabric.js画布中有所谓的叠加层（三个白色正方形），可以根据所使用的模板进行随机放置。

如果用户选择启用一个名为“ 正面覆盖”的新选项，则这些正方形上的所有内容都将位于其下方（我在这些覆盖中创建了白色Rect，并将其放置在画布顶部）。

在编辑结束之前，我可以使用“ FileSaver.js”库保存PNG，因为这些覆盖图的内部是透明的。现在，如果启用了“ 正面覆盖”，则该空间为白色。

我现在需要在移动时清空那些覆盖物，然后再保存它。 fabric.js是否可能？还是使用JS库？

Answer 1

答案比我想象的要容易得多

如果启用了我的新选项，我将覆盖我的覆盖物，并用“ clearRect”清除它们，这是可行的，因为fabric.js使用canvas ...：）

    if(frontOverlay) {
        let c = document.getElementById("canvas");
        let ctx = c.getContext("2d");

        for (let i = 0, len = overlaySvg.length; i < len; i++) {
            let stroke = overlaySvg[i].strokeWidth;
            ctx.clearRect(overlaySvg[i].left+stroke, overlaySvg[i].top+stroke, overlaySvg[i].width-stroke, overlaySvg[i].height-stroke);
        }
    }