如何在Javascript中将缓冲区对象转换为图像？答案

【问题标题】：How to convert buffer object to image in Javascript?如何在Javascript中将缓冲区对象转换为图像？
【发布时间】：2020-04-13 06:19:40
【问题描述】：

我只是尝试将图像作为缓冲区添加到 mongodb 并尝试转换回图像。在 ejs 中，它运行良好。

src="data:image/png;base64,<%=project.image1.toString('base64')%>"

这是我在 ejs 中使用的代码。

但是当我尝试通过纯 js 将其附加到元素时，它显示错误

$('#two').prepend($('<img>',{id:'theImg2',src:`data:image/png;base64,${ selected[0].image2.data.toString('base64')}`}))

这是我在纯js中使用的代码。

这是我在 js 中安慰的对象。

这是错误！

谢谢！

【问题讨论】：

什么错误，你没有显示出来。
哦，对不起。现已编辑。
来自哪里：image2.data？
使用 nodejs 从 MongoDB 获取数据并使用 ejs 传递给 javascript。然后尝试在过滤后附加图像。

标签： javascript arrays node.js

【解决方案1】：

JavaScript 中没有 .toString('base64')，它存在于 Node.js 缓冲区中，因此您只需在 Object 上调用 .toString，它确实会输出：[Object Object]，这就是您所得到的。

相当于 Node.js buffer.toString('base64') 将是：

function toBase64(arr) {
   //arr = new Uint8Array(arr) if it's an ArrayBuffer
   return btoa(
      arr.reduce((data, byte) => data + String.fromCharCode(byte), '')
   );
}

$('#two').prepend($('<img>',{id:'theImg2',src:`data:image/png;base64,${toBase64( selected[0].image2.data)}`}))

【讨论】：