获取 Base64 编码的图像并使用 ExpressJS 作为图像发送

Posted 2023-03-07

【中文标题】获取 Base64 编码的图像并使用 ExpressJS 作为图像发送

【英文标题】：Taking a Base64 Encoded Image and Sending it with ExpressJS as an Image

【发布时间】：2017-03-20 08:41:35

【问题描述】：

我正在开发一个使用 ExpressJS 作为 Web 服务器的 Node.JS 应用程序。

我想设置一个路由/get/thumbnail/by_guid/:guid，它将图像作为真实图像返回，而不是base64 字符串，因此我可以使用<img src="/get/thumbnail/by_guid/ABCD" > 设置图像标记的来源，并且将显示实际图像。

我将缩略图作为 BLOB 存储在我的数据库中并正在检索它们。当我检索它们时，它们成为我的节点应用程序中的缓冲区。然后我在我的路由中发送这些缓冲区，如下所示，其中img 是一个包含图像的缓冲区对象。

router.get('/get/thumbnail/by_guid/:guid', function(req, res)
    image_helper.guidToImage(req.params.guid).then(function(img)
        res.set('Content-Type', 'image/jpeg');
        res.set('Content-Length', img.length);
        res.end(img, 'latin1');
    , function(err)
        res.err(err);
    );
);

guidToImage 将图像作为缓冲区返回。

当我转到我知道的缩略图所描述的 URL 时，例如 /get/thumbnail/by_guid/ABCD，我看到一个像这样的白框：

当我查看 chrome 开发工具的网络选项卡时，请求如下所示：

响应只显示我的 base64 字符串：

当我获取它时，图像显示为损坏：

我怎样才能实现我想要做的事情？

我已经花了 6 个小时试图让它现在正常工作。

感谢您的帮助。

【问题讨论】：

如何在 html 中显示图像？

@Jorg 就像我发布的那样：<img src="/get/thumbnail/by_guid/ABCD" >

哦，是的，对不起。如果源是 base64，则需要指定：src="data:image/png;base64,[your base64 code]...

用atob怎么样？

@Jorg，我知道我可以这样显示它，但是我想将图像作为图像文件来获取，我不希望 base64 嵌入图像。有没有办法我可以做到这一点？您的方法需要我将图像的 base64 异步加载到 img 元素的 src 属性中。

【参考方案1】：

更改路径以使二进制文件正确显示。

router.get('/get/thumbnail/by_guid/:guid', function(req, res)
    image_helper.guidToImage(req.params.guid).then(function(img)
        var im = new Buffer(img.toString('binary'), 'base64');

        res.writeHead(200, 
        'Content-Type': 'image/jpg',
        'Content-Length': im.length
        );
        res.end(im);
    , function(err)
        res.err(err);
    );
);