Question

I need to download a BMP with JavaScript and render it to the screen, in Internet Explorer. First off, yes, I know this is insane, I’m not going to get into why, let’s just accept for a moment that img src is not working because of security constraints, but an ajax request with the proper authentication in the post will pull back the image. This example bypasses all the security for the sake of simplicity and just proves we can render something.

The best idea I could come up with was to fetch the stream via ajax, decode the bitmap, and then render it with canvas. Internet Explorer obviously doesn’t support canvas, but luckily Google provided a wrapper to SVG called excanvas that I can use for that.

My code (drawing code appears to work, bmp decoding not so much)

http://gist.github.com/614328

Future support for other images besides BMP is plausable, and because of how the canvas works it’s easiest to draw pixels in RGBA. Texture2D is essentially the wrapper class for an RGBA byte array, plus the drawing code. ByteStream makes it a bit easier on the eyes dealing with the byte array, and BitmapDecoder contains the method to translate the BGR format to RGBA texture2d for drawing.

Is it possible the bytes are getting mis-translated along the way or is there something the matter with my decoding logic?

FYI, I got the file spec from wikipedia:

http://en.wikipedia.org/wiki/BMP_file_format#Bitmap_Information_.28DIB_header.29

Any idea what’s going on in the decoding logic or drawing logic that’s causing my BMP to draw incorrectly?

Answer 1

The fix was a combination of two things

1. a bit of VBScript to read the raw bytes of responseBody
2. decoding the byte data properly, each pixel is not padded as the wikipedia article suggests, it’s actually each scanline that is padded to dword size.

Working code:

http://gist.github.com/616240