Html5 canvas 将OffscreenCanvas内容以PNG格式保存到磁盘

我正在使用canvg在画布上渲染SVG，并从浏览器下载为PNG。这是一个有效的打字脚本代码 基于他们的文档的代码片段

    const canvas = new OffscreenCanvas(this.width, this.height);
    const ctx = canvas.getContext('2d');
    const v = await Canvg.from(ctx!, this.svg.innerHTML, presets.offscreen());

    // Render only first frame, ignoring animations and mouse.
    await v.render();

    const blob = await canvas.convertToBlob();
    const pngUrl = URL.createObjectURL(blob);

    var img = new Image();
    img.src = pngUrl;

    const a = document.createElement("a");
    a.href = pngUrl;
    a.download = "svgexport.png";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

但是我想让它在电子中工作。我想使用

fs

模块将PNG写入磁盘，而不是下载PNG。我尝试了几种将

blob

内容写入PNG文件的方法，但是保存的文件不是有效的PNG文件。我还尝试了electron的

nativeImage

。但是它的API（

createFromBuffer

，

createFromBitmap

，

createFromDataURL

）都没有给出期望的结果

---

有什么想法吗？

好的，我找到了一个圆的方法来实现这一点。从OffscreenCanvas中获取的blob中，我创建了一个

图像

对象，然后将其渲染到

画布

，然后我可以将该画布中的数据URL写入磁盘上的文件，并提供一个有效的PNG。这是密码

    const canvas = new OffscreenCanvas(this.width, this.height);
    const ctx = canvas.getContext('2d');
    const v = await Canvg.from(ctx!, this.svg.innerHTML, presets.offscreen());

    // Render only first frame, ignoring animations and mouse.
    await v.render();

    const blob = await canvas.convertToBlob();
    const pngUrl = URL.createObjectURL(blob);

    var img = new Image();
    img.onload = () => {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.width = this.width;
        canvas.height = this.height;
        context!.drawImage(img, 0, 0);

        let dataURL = (canvas as HTMLCanvasElement).toDataURL();
        const base64Data = dataURL.replace(/^data:image\/png;base64,/, "");
        fs.writeFile("test5.png", base64Data, 'base64', function (err) {
            console.log(err);
        });
    }
    img.src = pngUrl;

---

我想看看是否有人有更好的建议。

这能回答您的问题吗？