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

Question

我保存图像的代码是：

print(highest_n_grades(student_list, 'assignment_1', 3))
# [{'id': 12344, 'first_name': 'Didi', 'last_name': 'Dawson', 'assignments': [('assignment_1', 4), ('assignment_2', 0), ('assignment_3', 2)]}, {'id': 12345, 'first_name': 'Ed', 'last_name': 'Enders', 'assignments': [('assignment_1', 4), ('assignment_2', 1), ('assignment_3', 3)]}, {'id': 12342, 'first_name': 'Boris', 'last_name': 'Bank', 'assignments': [('assignment_1', 2), ('assignment_2', 3), ('assignment_3', 0)]}]

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

错误窗口显示

  

.split()不是函数

错误。

Answer 1

请勿使用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);
               }
           }
       )
   );
}

Answer 2

我认为您的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('image.jpg', base64Data, 'base64', function (err) {
        console.log(err);
    });
}