Read binary data image JavaScript

Question

So I am using mongoDB as my database and I have saved an image in mongoDB in binary format.

The image below is how the data is being displayed in my database.

I have tried the following:

<img src="data:image/jpeg;base64{<%= user.img.data %>}"/>

But the above code does not seem to work. Please note I am using EJS as a tempting engine.

After doing the inspect element on google chrome I found that the data was being shown like so:

I am not sure how to read this binary image and display it in a img tag in html.

UPDATE:

After making the changes recommended by Alex Matos in the comments I get the following output:

You are missing a comma after base64 so it should read as: <img src="data:image/bmp;base64,{<%= user.img.data %>}"/> — Kush
– Kush, Commented Jan 20, 2016 at 9:41
I think you must return your buffer like a string. Something like this var buf2 = new Buffer(user.img.data).toString('base64'); console.log(buf2.toString()); I suppose that you uses nodejs — user3461226
– user3461226, Commented Jan 20, 2016 at 9:43
@Kush thank you for the comment. I tried your suggestion but it did not work. — Skywalker
– Skywalker, Commented Jan 20, 2016 at 9:45
@AlexMatos Im gonna try your suggestion now. And yes I'm using node.js — Skywalker
– Skywalker, Commented Jan 20, 2016 at 9:45

PRDeving · Accepted Answer · 2016-01-20 09:53:05Z

1

If you really got the images data and saved it i mongo db, you could render the image in a canvas and append it wherever you need.

// Renders the image data in a canvas off screen
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var data = ctx.putImageData(YOUR_MONGODB_DATA,0,0);

// Initializes a new image from canvas and appends it to the parent you want
var image = new Image();
image.id = "rendered-picture"
image.src = canvas.toDataURL();
document.getElementById('PARENT_ID').appendChild(image);

answered Jan 20, 2016 at 9:53

PRDeving

6693 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sotiris Kiritsis · Accepted Answer · 2016-01-20 09:35:45Z

0

Try returning data from your server using base64_encode.

For example:

    <?php
        $picture = base64_encode(user.img.data);
       <img src="data:image/jpeg;base64{<%= picture %>}"/>
    ?>

answered Jan 20, 2016 at 9:35

Sotiris Kiritsis

3,3563 gold badges25 silver badges31 bronze badges

Collectives™ on Stack Overflow

Read binary data image JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related