预保存编辑fabric.js PNG图像

Question

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

我的 fabric.js 画布中有我所谓的叠加层（三个白色方块），可以根据使用的模板随机定位。

如果用户选择启用一个名为“front overlays”的新选项，这些正方形上的所有内容都将位于它们之下（我在这些覆盖层中创建了白色矩形，并将它们放置在画布的顶部)。

之前，一旦编辑结束，我可以使用“FileSaver.js”库保存 PNG，因为这些覆盖层的内部是透明的。现在，如果启用“front overlays”，这个空间是白色的。

我现在需要在保存之前随时清空这些叠加层。可以使用 fabric.js 吗？还是使用 JS 库？

Answer 1

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

如果启用了我的新选项，我会在覆盖层周围循环，并使用“clearRect”清除它们，因为fabric.js 使用画布... :)

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