如何在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中记录的对象。

这是错误！

谢谢！

- Aditya V

---

你没有展示错误信息。 - Marcos Casagrande

哦，抱歉。现在已经编辑过了。 - Aditya V

image2.data 来自哪里？ - Marcos Casagrande

使用Node.js从MongoDB获取数据，并通过ejs传递给JavaScript。然后尝试在过滤后附加图像。 - Aditya V

Answer 1

在JavaScript中没有.toString（'base64')方法，但在Node.js的Buffers中存在该方法，因此您只是在一个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)}`}))

- Marcos Casagrande