读取二进制数据图像JavaScript

Question

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

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

我尝试了以下内容：

add

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

在Google Chrome上执行inspect元素后，我发现数据显示如下：

我不确定如何读取此二进制图像并将其显示在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 %>}"/>
    ?>