html5-canvas - 在 Electron 中将 OffscreenCanvas 内容以 PNG 格式保存到磁盘

Question

我正在使用 canvg 在 Canvas 上渲染 SVG 并从浏览器将其下载为 PNG。这是一个有效的 typescript 代码
基于他们的文档的片段。

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

但是我想让这个在 Electron 中工作。我不想下载 PNG，而是想使用 fs 将其写入磁盘模块。我尝试了几种写 blob的方法内容为 PNG 文件，但保存的文件不是有效的 PNG 文件。我也试过 Electron 的 nativeImage .但是它的 API( createFromBuffer、 createFromBitmap、 createFromDataURL)都没有给出预期的结果。

有任何想法吗？

Answer 1

好的，我找到了一个完成此任务的方法。从我从 OffscreenCanvas 获得的 blob 中，我创建了一个 Image对象，然后将其渲染为 canvas ，然后我可以将该 Canvas 中的数据 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;

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