读取二进制数据图像JavaScript

Question

因此，我将mongoDB用作数据库，并且已将图像以二进制格式保存在mongoDB中。

下图是如何在数据库中显示数据。

我尝试了以下方法：

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

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

在对谷歌浏览器执行检查元素之后，我发现数据显示如下：

我不确定如何读取此二进制图像并将其显示在html的img标签中。

更新：

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

Answer 1

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

// 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);

Answer 2

尝试使用base64_encode从服务器返回数据。

例如：

    <?php
        $picture = base64_encode(user.img.data);
       <img src="data:image/jpeg;base64{<%= picture %>}"/>
    ?>