Hi to all! I need some help with putting image binary data into html.

var xmlhttp = getXmlHttp();
xmlhttp.open('GET', 'http://example.com/image.jpeg', true);
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4) {
   if(xmlhttp.status == 200) {
   //Here, when AJAX request will be completed, i would like to put data conrained in xmlhttp.responseText into html and make browser correctly render it.
   }
 }
};
xmlhttp.send(null);

Any help is appreciated.

Embed image data into the HTML file? You'd have to base64 encode it. Though, I wonder if IE (surprise surprise) might have some issues there. Might have better luck saving it to a temp file.

Embed image data into the HTML file? You'd have to base64 encode it. Though, I wonder if IE (surprise surprise) might have some issues there. Might have better luck saving it to a temp file.

Yeah...embed data into html. It seems to me that i can't exaclty find out the way to encode loaded data. Can you post some code example?

In JS - not from the top of my head. Try a google search.

 

Had it been PHP - there is a convenient function available. But first you should check if IE supports base64 images.

I found the solution using PHP. Here it is.

Using this javascript we send the AJAX request to the php script that returns base64 encoded image binary data:

var xmlhttp = getXmlHttp();
xmlhttp.open('GET', 'http://example.com/script.php', true);
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4) {
   if(xmlhttp.status == 200) {
   //Here we embed base64 encoded data into html
   document.getElementById('content').innerHTML = '<img src="data:image/jpeg; base64,' + xmlhttp.responseText + '" />';
   }
 }
};
xmlhttp.send(null);

Here script.php is:

<?php
echo base64_encode(file_get_contents('image.jpeg'));
?>

I also tried to use only JS, but it seems that functions that I had found, for example here http://www.webtoolkit.info/javascript-base64.html , don't encode correctly. Although may be I missed something.

The JS library produce corrupted images?

The JS library produce corrupted images?

The JS library produce corrupted images?

Yes, we obtain corrupted images in result, but actually base64 encoded string ,returned from Base64.encode() method (link to js library above), is corrupted. I have compared string, returned from php function base64_encode, and string, returned from Base64.encode() method. They are not the same.

Are the JS method returning a larger string?

 

I wonder if some character encoding errors might occur? Maybe some characters are treated as multibyte...

On this page you can find code examples for how to convert images to base64 with PHP, Java and more.

 

As of 2015, data URIs are fully supported by most major browsers. IE and Edge offers limited support of data uri:s.

may i ask why you need to load an image via ajax? This seams a very in-efficient way to load an image.

I load almost all my images via ajax - also known as lazy loading where you load in image as the user scrolls towards their location in the document. it makes a massive difference to server load on high traffic sites, or those with a lot of visual content. It also helps reduce page load for users, saves critical bandwidth for users on fixed data-plans.

 

Although the OP's method seems a very weird way to do things. I just put the image source in a data-attribute, populate the actual src attribute with a blank gif. You can use multiple data-attributes if you want responsive images- i.e. different images served depending on the viewport width.

 

I'd advise using jQuery for Ajax, it saves a lot of headaches, the DOM API is probably the worst API ever created and it's nice to abstract mess away. If you're worried about filesize then I argue that you are likely to get far better performance gains optimising elsewhere. -- This is what Crockford advises in the vast majority of cases.

 

You can simply ajax in an image like this:

el.attr('src', src);

Where el is the image, and src is the value pulled from the data attribute.

 

I wrote about this more extensively here: http://rbrtsmith.com/2015/02/building-a-high-performance-lazy-load-module/

Edited September 6, 201510 yr by rbrtsmith

Use the <img> tag this way:

<img src="data:image/gif;base64,xxxxxxxxxxxxx...">