Question

I want to, from JavaScript, access as a variable the file that is loaded as an image in an img tag.

I don’t want to access its name, but the actual data.

The reason for this is that I want to be able to copy it to and from variables so that I can , among other things, change the image without reloading it.

Can this be done? If so, how?

Note: I’m slightly more interested in reading the data than writing it.

Answer 1

// Download the image data using AJAX, I'm using jQuery var imageData = $.ajax({ url: 'MyImage.gif', async: false }).responseText;  // Image data updating magic imageDataChanged = ChangeImage(imageData);  // Encode to base64, maybe try the webtoolkit.base64.js library imageDataEncoded = Base64Encode(imageDataChanged);  // Write image data out to browser (FF seems to support this) document.write('<img src='data:image/gif;base64,' + imageDataEncoded + ''>');