Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Converting image into data:image/png;base64 for web page disaplay

Tags:

If one visits jQuery-File-Upload Demo page and will try to upload an image, and then will look at the JSON response, he would notice that a preview of an uploaded image is returned in a format:

"thumbnail_url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAI... 

As far as I understand, an images is getting transformed into string and sent back to the client.

How can I do it in C# to impelement ASP.NET back end for the same demo?

like image 321
Maxim V. Pavlov Avatar asked Mar 15 '12 21:03

Maxim V. Pavlov


People also ask

How do I display Base64 data in HTML?

Images encoded with Base64 can be embedded in HTML by using the <img> tag. This can help to increase the page load time for smaller images by saving the browser from making additional HTTP requests.

What is Data Image PNG Base64?

data:image/png;base64 tells the browser that the data is inline, is a png image and is in this case base64 encoded. The encoding is needed because png images can contain bytes that are invalid inside a HTML document (or within the HTTP protocol even).

What is Base64 in HTML?

Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.


1 Answers

I remember reading an answer to a question a while back by the very competent competent_tech and thinking "I never knew you could do that!"

In that answer is an example about how to set the src of an ASP.Net image to be the base64 encoded data you see above.

It effectively boils down to setting the src of an ASP:Image control as follows:

imgCtrl.Src = @"data:image/gif;base64," + Convert.ToBase64String(File.ReadAllBytes(Server.MapPath(@"/images/your_image.gif"))); 

Remember to change the content type depending on the image!

like image 181
dash Avatar answered Oct 21 '22 23:10

dash