How do I load binary image data using Javascript and XMLHttpRequest?

Question

I was trying to load an image client side and base64 encode the bytes returned by the server in order to pass it off to perform some processing. IE has a RequestBody property of the XMLHttpRequest object, but I can't seem to use it, and RequestText is truncated. In Firefox, RequestText is there, but seems corrupted.

Answer 1

After a few days' effort I was able to make this work, although information on the Internet for doing such binary manipulation is fairly scarce. I think it may be useful for others, especially when dealing with Data URIs, so I've detailed my work here: http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html

Answer 2

You could have the server return base64 text, rather than doing that encoding client side.

For example, (in ASP.NET) a request to /ImageAsBase64.ashx?file=/images/myimage.png could be coded to read the file, base64encode it, and stream it as a response.

It's really going to be pretty much the same thing in PHP or whatever.

Answer 3

If you're using COTS, you could always set up an intermediate gateway wherein the request is made and transformed (base64 encoded in this case) into something more palatable before being returned to the client.