javascript - 读取二进制数据图像 JavaScript

Question

所以我使用 mongoDB 作为我的数据库，并且我已经以二进制格式在 mongoDB 中保存了图像。

下图是数据在我的数据库中的显示方式。

我尝试过以下方法:

<img src="data:image/jpeg;base64{<%= user.img.data %>}"/>

但是上面的代码似乎不起作用。请注意，我使用 EJS 作为一个诱人的引擎。

在 google chrome 上执行检查元素后，我发现数据显示如下:

我不知道如何读取这个二进制图像并将其显示在 html 中的 img 标签中。

更新:

进行 Alex Matos 在评论中建议的更改后，我得到以下输出:

Answer 1

如果您确实获得了图像数据并将其保存在 mongo db 中，您可以在 Canvas 中渲染图像并将其附加到您需要的任何位置。

// Renders the image data in a canvas off screen
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var data = ctx.putImageData(YOUR_MONGODB_DATA,0,0);

// Initializes a new image from canvas and appends it to the parent you want
var image = new Image();
image.id = "rendered-picture"
image.src = canvas.toDataURL();
document.getElementById('PARENT_ID').appendChild(image);