如何使用 Node.js 保存图像（作为 base64 编码字符串传入）答案

【问题标题】：How do you save an image (passed in as a base64 encoded string) with Node.js如何使用 Node.js 保存图像（作为 base64 编码字符串传入）
【发布时间】：2015-05-04 03:23:16
【问题描述】：

我在 Meteor 应用程序上使用 Phantom.js 创建了一个 HTML5 画布，我正在尝试将 Canvas 图像保存在磁盘上。

问题：保存的图像文件似乎已损坏（无法在图像查看器中打开）。

我从 HTML5 Canvas.toDataUrl 方法获得了一个 base64 编码的 PNG 图像。这就是我保存的 Canvas.toDataUrl() 函数输出的样子： WzMyLDMyLDU4LDQ3LDEwOSwxMTEsMTAwLDExNywxMDgsMTAxLDExNSw0NywxMTksMTAxLDk4LDExMiw5NywxMDMsMTAxLDQ2LDEwNiwxMTUsNTgsNTAsNTYsNDksMTBd

这是我的保存程序：

var buffer = new Buffer(JSON.stringify(CanvasString)).toString('base64');
var fs = Meteor.npmRequire("fs");
var fullFileName = fileName + '.png';
fs.writeFileSync(fullFileName, buffer, "binary");

我可以使用上面输出的文本编辑器将保存的图像作为纯文本查看。

【问题讨论】：

它是base64编码的，你必须在写入文件之前对其进行解码。也许fs.writeFileSync(fullFileName, buffer, "base64"); 也可以。

标签： node.js image canvas meteor phantomjs

【解决方案1】：

试试这些步骤：

// our data URL string from canvas.toDataUrl();
var imageDataUrl = "data:image/png;base64,[...]";
// declare a regexp to match the non base64 first characters
var dataUrlRegExp = /^data:image\/\w+;base64,/;
// remove the "header" of the data URL via the regexp
var base64Data = imageDataUrl.replace(dataUrlRegExp, "");
// declare a binary buffer to hold decoded base64 data
var imageBuffer = new Buffer(base64Data, "base64");
// write the buffer to the local file system synchronously
fsWriteFileSync("/tmp/test.png", imageBuffer);

注意：您可能不想在 Node.JS 中使用fs.writeFileSync 写入磁盘，因为它会阻塞整个 Node 事件循环。

改为使用 Meteor.wrapAsync 包装调用：

var fsWriteFileSync = Meteor.wrapAsync(fs.writeFile, fs);

【讨论】：