Can I access the datafile of an img tag from JavaScript

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 + '">');

Answer 2

If you are using Firefox (and I think Opera and maybe Safari; I can't check right now), you can draw the image on a canvas element and use getImageData.

It would work kind of like this:

var img = document.getElementById("img_id");
var canvas = document.getElementById("canvas_id");
var context = canvas.getContext("2d");

var imageData = context.getImageData(0, 0, context.width, context.height);

// Now imageData is an object with width, height, and data properties.
// imageData.data is an array of pixel values (4 values per pixel in RGBA order)

// Change the top left pixel to red
imageData.data[0] = 255; // red
imageData.data[1] = 0;   // green
imageData.data[2] = 0;   // blue
imageData.data[3] = 255; // alpha

// Update the canvas
context.putPixelData(imageData, 0, 0);

Once you get the image data, you can calculate the starting index for each pixel:

var index = (y * imageData.width + x) * 4;

and add the offset for each channel (0 for red, 1 for green, 2 for blue, 3 for alpha)