javascript - 如何在 Electron.js 中保存在 Canvas 上绘制的图像

Question

我保存图片的代码是:

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

我无法保存在 Canvas 上绘制的图像

错误窗口显示

img.toPNG is not a function

错误。

Answer 1

我假设您的 canvas 是正确的并且已经绘制好了。所以你不需要 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);
    });
}