NodeJS 编写 base64 图像文件答案

【问题标题】：NodeJS write base64 image-fileNodeJS 编写 base64 图像文件
【发布时间】：2013-12-14 14:21:37
【问题描述】：

我的 NodeJS-Server 收到一张 base64 编码的图片。

data:image/jpeg;base64,/9j/4QCcRXhpZgAASUkqAAgAAAA ... CiiigD//Z

接收到的数据应该保存为jpg。因此我使用了 Buffer 和 FileSystemWriter：

var imageBuffer = new Buffer(data, 'base64'); //console = <Buffer 75 ab 5a 8a ...
fs.writeFile("test.jpg", imageBuffer, function(err) { //... });

fs.writeFile 不会引发错误。保存了一个 jpeg 文件，但我无法打开它。 Image-Viewer 说：

File is damaged or too big.

原始文件为 6kb，新文件为 7kb。

【问题讨论】：

在尝试对数据进行 base64 解码之前，您是否切断了领先的 data:image/jpeg;base64,？
不，我必须这样做吗？我认为 imageBuffer 需要这些信息
不，不是，HTML中的img，video标签是必需的，base64部分是后面的部分，它包含实际内容
啊，太棒了..它有效:)）
也许您可以回答这个问题，这样问题就不属于“未回答”类别？

标签： node.js

【解决方案1】：

您必须从中删除 url 元信息，即data:image/jpeg 部分。（重申@CBroe 所说的）这是一个从输入字符串返回正确信息的小函数。

var data = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA..kJggg==';

function decodeBase64Image(dataString) {
  var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
    response = {};

  if (matches.length !== 3) {
    return new Error('Invalid input string');
  }

  response.type = matches[1];
  response.data = new Buffer(matches[2], 'base64');

  return response;
}

var imageBuffer = decodeBase64Image(data);
console.log(imageBuffer);
// { type: 'image/jpeg',
//   data: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 b4 00 00 00 2b 08 06 00 00 00 d1 fd a2 a4 00 00 00 04 67 41 4d 41 00 00 af c8 37 05 8a e9 00 00 ...> }

然后您可以使用上述方法保存缓冲区。

fs.writeFile('test.jpg', imageBuffer.data, function(err) { ... });

【讨论】：

感谢这位 Julian，我注意到您正在输入一个 png base64 字符串并输出一个 jpg。那样有用吗？缓冲区会自动将自身重新编码为新的文件类型吗？我在我的应用程序上做类似的事情，它似乎正在工作，但我只是想知道我是否还在存储扩展名为 .jpg 的 png...
通常文件扩展名不会影响图像的解析。操作系统通常会做各种事情来自动更正“文件类型”。我已更正答案以减少任何混淆。
嗨，它对我有用，但是如果我想将它保存到数据库中，因为我尝试记录数据但没有打印任何内容
这可行，但我的图像查看器在尝试打开图像时抛出错误。我得到“无法加载文件，遇到过早的文件结束”。我在某处读过它与解码不是 url 安全有关。你有什么建议？
由于new Buffer 已被贬值，您可以使用Buffer.from(matches[2], 'base64');

【解决方案2】：

另一种方法是在剥离元信息后使用fs.writeFile 和编码选项base64。

var image = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA..kJggg==';

var data = image.replace(/^data:image\/\w+;base64,/, '');

fs.writeFile(fileName, data, {encoding: 'base64'}, function(err){
  //Finished
});

【讨论】：

你传入的fileName参数是什么？
任何东西，你想要的那个图像的文件名。例如：xyz.jpg
我在整个互联网上寻找它。非常感谢！

【解决方案3】：

试试这个简单的方法

 var imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..kJggg==';
var base64Data = imgData.replace(/^data:image\/png;base64,/, "");


require("fs").writeFile("out.png", base64Data, 'base64', 
function(err, data) {
if (err) {
    console.log('err', err);
}
console.log('success');

});

关注这里 1) data:image/png;base 有 png 2) replace(/^data:image\/png; 这里也有 png 和名字必须保存 3) writeFile("out.png png

【讨论】：

【解决方案4】：

这里你可以用这种方式我做的小改动

    var imgData = req.body.image;// coming from client request
  var base64Data = imgData.split(",")[1];// split with `,`

   require("fs").writeFile(Date.now()+"filename.jpeg", base64Data, 'base64', 
    function(err, data) {
       if (err) {
      console.log('err', err);
         }
        console.log(data,"data");

最后你的文件看起来像1572341624757filename.jpeg

【讨论】：