Javascript 如何在Electron中将ImageData保存为PNG

在浏览器中，我构建了一个图像数据数组，如您在此处所见，将其转换为多种不同的形式，以便在浏览器中下载，这起到了作用：

let clamped = Uint8ClampedArray.from(frameBuffer);
let imageData = new ImageData(clamped, width, height);
this.resultContext.putImageData(imageData, 0, 0);
this.uri = this.resultCanvas.toDataURL("image/png");
this.blob = dataURItoBlob(this.uri);

但是现在我试图用Node.js fs模块保存这个blob，但这不起作用：

fs.writeFile(this.path + "/" + angle + ".png", this.blob, err => {
  if (err) {
    alert("An error ocurred creating the file " + err.message);
  }
  console.log("The file has been successfully saved");
});

编辑：dataURItoBlob:

function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;
  if (dataURI.split(",")[0].indexOf("base64") >= 0)
    byteString = atob(dataURI.split(",")[1]);
  else byteString = unescape(dataURI.split(",")[1]);
  // separate out the mime component
  var mimeString = dataURI
    .split(",")[0]
    .split(":")[1]
    .split(";")[0];
  // write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: mimeString });
}

函数dataURItoBlob（dataURI）{ //将base64/URLEncoded数据组件转换为字符串中的原始二进制数据 var-byteString； if（dataURI.split（“，”[0].indexOf（“base64”）>=0） byteString=atob（dataURI.split（“，”[1]）； else-byteString=unescape（dataURI.split（“，”[1]）； //分离出mime组件 var mimeString=dataURI .split（“，”[0] .拆分（“：”[1] .split（“；”）[0]； //将字符串的字节写入类型化数组 var ia=新的Uint8Array（byteString.length）； for（var i=0；i 它没有抛出错误，但生成的文件无效。我怎样才能解决这个问题呢？

看起来这样行得通

canvas.toBlob(saveBlob);

function saveBlob(blob) {
  const reader = new FileReader();
  reader.onloadend = () => {
    fs.writeFile('filename.png', new Uint8Array(reader.result), err => {
      if (err) {
        alert("An error ocurred creating the file " + err.message);
      } else {
        console.log("The file has been successfully saved");
      }
    });
  }
  reader.readAsArrayBuffer(blob);
}

注：2019年，我可能会转向承诺和异步内容。有一点设置，但然后使用更容易一些定义更容易

const fs = require('fs');  // would prefer import
const util = require('util');

const writeFile = util.promisify(fs.writeFile);

function readBlobAsUint8Array(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      return new Uint8Array(reader.result);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(blob);
  });
}

function getCanvasAsBlob(canvas) {
  return new Promise((resolve) => {
     canvas.toBlob(resolve);
  });
}

async function saveCanvasAsPNG(filename, canvas) {
  const blob = await getCanvasAsBlob(canvas);
  const data = await readBlobAsUint8Array(blob);
  await writeFile(filename, data);
}

可以从另一个异步函数调用，如

async function someFunc() {
  try {
    await saveCanvasAsPNG('foo.png', canvas);
    console.log('success');
  } catch (e) {
    alert(e);
  }
}

或者从一个非异步函数

saveCanvasAsPng('foo.png', canvas)
  .then(() => {
     console.log('success');
  })
  .catch(alert);

请注意，这也适用

const dataUrl = canvas.toDataURL();
const uu = dataUrl.substring('data:image/png;base64,'.length);
fs.writeFileSync(filename, uu, 'base64');

---

如何实现

dataURItoBlob

？哦，如果是这样的话，那是行不通的。不接受，仅接受或字符串。@PatrickRoberts我尝试过，但结果图像仅为黑色。在使用基于浏览器的方法之前，它已成功保存，以便我可以验证数据源是否正常。仅供参考，您可以使用

canvas.toBlob

直接从画布获取blob，但与

canvas.toDataURL

不同，它需要一个接收blob相关的回调@格曼不太喜欢。在electron中，相同的执行上下文可以访问画布和节点模块，如

fs

。这将字符串

[object ArrayBuffer]

保存到文件中。我可以看到数组缓冲区包含正确的数据，但是由于某种原因，对象的字符串输出标签被保存到文件中code@Viziionary“出于某种原因”与我已经指出的原因相同

fs.writeFile（）

只接受

缓冲区或字符串。如果它是其他内容，它将强制它为string.fixed@帕特里克·罗伯茨，
fs.writeFile
采用了
TypedArray
很好。它不需要一个
ArrayBuffer
@PatrickRoberts是的，我需要，但你说它只需要一个缓冲区或字符串。它也需要一台打字机