How to convert buffer object to image in Javascript?

Question

I just tried to add image as buffer to mongodb and tried to convert back to image. In ejs, it worked fine.

src="data:image/png;base64,<%=project.image1.toString('base64')%>"

This is the code i used in ejs.

But when i tried to append this to an element through pure js, it shows error

$('#two').prepend($('<img>',{id:'theImg2',src:`data:image/png;base64,${ selected[0].image2.data.toString('base64')}`}))

This is the code i used in pure js.

This is the object i consoled in js.

This is the error!

Thank you!

Answer 1

There's no .toString('base64') in JavaScript, that exists in Node.js Buffers, so you're just calling .toString on an Object, which will indeed output: [Object Object] which is what you're getting.

The equivalent of Node.js buffer.toString('base64') would be:

function toBase64(arr) {
   //arr = new Uint8Array(arr) if it's an ArrayBuffer
   return btoa(
      arr.reduce((data, byte) => data + String.fromCharCode(byte), '')
   );
}

$('#two').prepend($('<img>',{id:'theImg2',src:`data:image/png;base64,${toBase64( selected[0].image2.data)}`}))