Render byte[] to image using jQuery

Question

I am currently reading an image from an SQL Server database as byte[]. I would like to pass the image either as a byte[] or a real image to jQuery and dynamically load it.

How and what would be the best approach to do this?

Thanks in advance. :)

Edit: Here's the solution:

Server-side / C#: string json = JsonConvert.SerializeObject(employee);
Client-side / Ajax: $('#image').attr('src', "data:image/jpg;base64,"+employee.Image);

Fredrik Leijon · Accepted Answer · 2011-02-25 15:28:20Z

9

Return the byte[] from the webserver with the correct content-type set, that way you should be able to set it as a source for a image tag. Should be the simplest solution.

answered Feb 25, 2011 at 15:28

Fredrik Leijon

2,79219 silver badges20 bronze badges

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

3 Comments

rebelliard Over a year ago

What do you mean by the correct content-type set? FYI, I use Json.NET to return data to jQuery. Then I would just do <img src=$imagebytes /> ? Thanks.

Fredrik Leijon Over a year ago

for say jpeg, set request.contenttype ="image/jpeg", but if you just return the byte[] on a ajax request then you need to do something similar in the browser

rebelliard Over a year ago

Thank you. With yours and @Tesserex answer, we got it to work. :)

Tesserex · Accepted Answer · 2011-02-25 15:31:29Z

7

If you must do it this way, you can insert image data directly into the src attribute using the following syntax:

data:image/<type>;base64,<data>

Replace with the image type (jpg, png, gif) and with your data, encoded in base 64.

However, as decyclone says, the best way to do this would be to create a separate page that only outputs your image data, and sends the appropriate content-type header. Then set the image src to point to that page.

answered Feb 25, 2011 at 15:31

Tesserex

17.3k6 gold badges72 silver badges108 bronze badges

Comments

decyclone · Accepted Answer · 2011-02-25 15:29:17Z

3

I don't think using jQuery is the right thing to do here. It's a client side thing. JavaScript, to be specific.

Usually, you create a page that writes all these bytes in array using Response.Write() and setting the content-type to jpeg, bmp, etc. depending on image type.

answered Feb 25, 2011 at 15:29

decyclone

30.9k7 gold badges67 silver badges80 bronze badges

Comments

Pushp · Accepted Answer · 2013-03-07 06:00:08Z

I am currently reading an image from a JSON Response. I would like to pass this encoded string into the image control on Jquery template and load it dynamically, How and what would be the best approach to do this? Template is as follows:

<script id="ImageDiv" type="image/png">
    <div style="width:200px;height:150px;>
            <img src="${ImageView}" alt="" />
        </div>
</script>

Js file is as follows:

var demo = new Object();

$.each(msg.images, function (key, value) 
            {
                if (this.IsImage)
                 {
                    demo["ImageView"]="data:image/png;base64,"+this.Image;
                    $('#ImageDiv').tmpl(demo).appendTo("#Demo-Image");

                 }
            });

JSON Response is as follows:

msg = {"Images":[ "Description": "Image1", "Image": "encoded string of image", "IsImage": true, "MimeType": "image/png", } ]

less space to copy encoded string of image.

Collectives™ on Stack Overflow

Render byte[] to image using jQuery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related