有关将图像的Buffer转换为图像并将其显示在html页面中的问题

编程入门行业动态更新时间:2024-10-09 05:13:01

有关将<a href=https://www.elefans.com/category/jswz/34/1771430.html style= 图像的Buffer转换为图像并将其显示在html页面中的问题"/>

有关将图像的Buffer转换为图像并将其显示在html页面中的问题

我的js代码为

app.get("/", function(req, res) { 
        var sql="SELECT image FROM images WHERE img_id=2"; 
        connection.query(sql, function(err, result){
            if(result.length <= 0)
                message = "Profile not found!";
            console.log(result);
            res.render('image.ejs',{data:result});
   });
    });

而image.ejs代码为：

<html>
    <head>
         <title>Images</title>
    </head>
    <body>
        <%= data %>
    </body>
</html>

当我跑步时，我得到的响应就像[object Object]但是我需要显示我的图像。你们会帮助我吗？

回答如下：

ArrayBuffer/Buffer不能是img标签的值，您可以做的是base64编码图像并显示它

res.render('image.ejs',{ data: result[0].image.toString('base64') });

现在在HTML上

<html>
    <head>
         <title>Images</title>
    </head>
    <body>
        <img src='data:image/png;base64,<%= data %>' />
    </body>
</html>

如果图像具有不同的扩展名，则可以在缓冲区上使用：file-type包，并将图像类型添加到传递给res.render的数据中>

const imageBuffer = result[0].image;
const { mime } = await FileType.fromBuffer(imageBuffer)

res.render('image.ejs', { data: imageBuffer.toString('base64'), mime });

<img src='data:<%= mime %>;base64,<%= data %>' >

更多推荐

有关将图像的Buffer转换为图像并将其显示在html页面中的问题

本文发布于:2024-05-07 13:16:56，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1756415.html