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

Question

我只是尝试将图像作为缓冲区添加到 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 中安慰的对象。

这是错误！

谢谢！

Answer 1

.toString('base64')JavaScript 中没有，它存在于 Node.js Buffers 中，因此您只需调用.toString一个Object，它确实会输出：[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)}`}))