将缓冲区数据转换为图像

Question

如何将此缓冲数据转换为图像，以便在循环遍历结果并在img src中呈现时，它将呈现为用户可以看到的图像。我正在使用ejs进行渲染。

     <span>
        <img class="user-with-avatar" src=<%=item.photo%> />
     </span>

当我在控制台使用console.log(result.data.photo)时，我得到了以下结果。

{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]},
{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]},
{"type":"Buffer","data":[100,97,116,97,58,14,79,8,113,97,65,43,57,55,89,69,88,51,66,101,70,86,112,121,112,121,121,121,80,81,104]}

我该如何使用这个代码排列来修复它？

    app.get('/products', function (req, res) {
            if (req.session.token && req.session.user_id) {
                let data = {
                    token: req.session.token,
                    id: req.session.user_id,
                }
                let url = `https:/url/product/get_products?id=${data.id}&token=${data.token}`
                functions.callAPIGet(
                    url,
                    function (error, result) {
                        res.render('products', {
                            result: result.data
                        })
                    }
                );
            } else {
                res.redirect('/login')
            }
        });

- CodaBae

---

听起来你想要一个数据URI，以便在页面中嵌入它。请参考https://dev59.com/DK_la4cB1Zd3GeqPx8W_了解一种实现方法。 - jfriend00

Answer 1

您需要将缓冲区转换为base64字符串。这是一个PNG图像的示例。但是我不清楚您的图像存储在哪里以及它的格式是什么。此示例将图像作为文件读取。根据您的数据源可能需要调整一些内容。

server.js

const express = require('express')
const app = express()
const fs = require('fs')
app.set('view engine', 'ejs')

app.get('/', function(req, res) {
  const data = fs.readFileSync('./image.png')

  res.render('page', {
    image: data.toString('base64')
  })
})

const server = app.listen(2000)

views/page.ejs

<img src="data:image/png;base64,<%= image %>" />

- cyberwombat

---

我刚刚改进了问题。 - CodaBae

我认为 OP 正在尝试创建一个数据 URL，将其嵌入页面中（其中图像数据在 URL 中），而不是响应浏览器对图像的请求。 - jfriend00

啊，我明白了。@CodeBae - 你能澄清一下这个图像是如何存储和获取的吗？我调整了示例以将图像读取为文件，但我怀疑你的用例有些不同。 - cyberwombat

Answer 2

这是使用express.js完成的示例

const express = require("express");
const app = express();
    
app.get("/images/:id", async (req, res) => {
  const id = req.params.id;
  const image = await Product.findOne({ _id: id }).select("images");
  res.contentType(image.contentType);
  res.send(image.data);
});
    
app.listen(3000, () => {
  console.log("Image server started on port 3000");
});

以下是如何在HTML中显示图像的方法：

<img src="http://localhost:3000/images/<id-of-the-image>" />

- sofian