使用 canvas.toDataURL() 中的 node.js 保存图像文件

Question

我正在制作一个电子应用程序，我希望用户能够将当前页面的屏幕截图保存为图像文件。 为此，我使用 html2canvas 创建当前正文的 canvas 元素，然后将其 canvas 转换为 DataURL

html2canvas(document.body, {
    onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

这可以正常工作，但我现在想使用 Node.js 文件系统

将其保存到图像文件中

        fs.writeFile("testImg.png", image, 'binary', (err) => {
            if (err) console.log("didnt work", err);
            else console.log("write worked");
        });  

这会将一个名为 "testImg.png" 的文件写入我的硬盘，但该文件仅包含：“[object HTMLImageElement]”，大小为 25kb

        window.location.href=image;

这会打开一个对话框让我保存图像文件，实际上也保存了图像，所以我现在的问题是如何在没有用户对话框的情况下将生成的图像保存到文件中。

Answer 1

您可以使用网络文件 API 将数据 URL 转换为缓冲区，例如，使用 FileReader.readAsDataURL.

但更好的解决方案是使用 BrowserWindow#capturePage 截取屏幕截图——这应该比使用 html2canvas 容易得多。

更新：

哎呀，'readAsDataURL'帮不了你了，因为你已经有了一个数据URL，抱歉。您可以 just decode 将 URL 添加到缓冲区，因为它只是 base64，但您真的应该考虑使用 'capturePage'，因为它可能是创建屏幕截图的更好工具。