[英]How can I save ImageData as a PNG in Electron
在瀏覽器中,我正在構建圖像數據數組,如您在此處看到的那樣,將其轉換為多種不同的形式,以便在瀏覽器中下載它,該方法有效:
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 });
}
它沒有引發錯誤,但是生成的文件無效。 我怎樣才能解決這個問題?
看起來像這個作品
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年,我可能會轉向Promise和異步內容。 設置很少,但是使用起來更容易一些定義
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');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.