在Electron中将OffsetScreenCanvas内容以PNG格式保存到磁盘

Question

我使用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);

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

有什么想法吗？

Answer 1

好的，我找到了一个全面的方法来实现这一点。从我从OffsetcreenCanvas获得的blob中，我创建了一个Image对象，然后将其渲染为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;

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