如何在 Electron.js 中保存画布上绘制的图像

Posted 2023-03-22

【中文标题】如何在 Electron.js 中保存画布上绘制的图像

【英文标题】：How to save an image drawn on the canvas in Electron.js

【发布时间】：2019-03-12 12:48:44

【问题描述】：

我保存图像的代码是：

var fs = require('fs');
const dialog = require('electron').remote.dialog;
var canvasBuffer = require('electron-canvas-to-buffer');

dialog.showSaveDialog(title:'Testing a save dialog',defaultPath:'image.jpg',saveCallback);

function saveCallback(filePath) 
  // as a buffer
  var buffer = canvasBuffer(canvas, 'image/png')
  // write canvas to file
  fs.writeFile('image.png', buffer, function (err) 
    throw err
  )

我无法保存画布上绘制的图像

错误窗口显示

img.toPNG 不是函数

错误。

【问题讨论】：

什么是canvas，您将其提供给canvasBuffer（很可能这是有问题的数据）。请分享一个可测试的代码。

【参考方案1】：

我假设您的canvas 是正确的并且已经绘制。所以你不需要画布到缓冲区。 试试这个方法。 （我用的是 jpg，但 png 也可以）

function saveCallback(filePath) 
    // Get the DataUrl from the Canvas
    const url = canvas.toDataURL('image/jpg', 0.8);

    // remove Base64 stuff from the Image
    const base64Data = url.replace(/^data:image\/png;base64,/, "");
    fs.writeFile(filePath, base64Data, 'base64', function (err) 
        console.log(err);
    );

【参考方案2】：

不要使用toDataURL()。 toBlob() 就是为此目的而设计的。像这样的东西（完全未经测试）：

async function saveCallback(filePath) 
  const blob = await new Promise(
     (resolve) => canvas.toBlob(blob => resolve(blob), "image/jpg", 0.8)
  );
  const buffer = new Buffer(await blob.arrayBuffer());
  
  await new Promise(
      (resolve, reject) => fs.writeFile(
           filePath, 
           buffer, 
           "binary", 
           (err) => 
               if (err === null) 
                   resolve();
                else 
                   reject(err);
               
           
       )
   );