Convert buffer data to an image

Viewed 21146

how do i convert this buffer data to an image so when am looping thru the result and rendering it in the img src it will render as an image that the user can see

am using ejs to render it

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

when i console.log(result.data.photo), i get this

{"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]}

how do i fix it with this code arrangement


    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')
            }
        });

1 Answers

You'll need to convert the buffer to a base64 string. Here's an example for a PNG image. I am not clear on where your image is stored and format it's in however. This example reads the image as a file. May need to adjust things based on your data source.

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 %>" />

Related