JavaScript BMP decoding and Canvas Explorer drawing

Question

I need to load BMP using JavaScript and display it on the screen in Internet Explorer. Firstly, yes, I know that this is crazy, I won’t go into why, let’s just take for a moment that img src is not working due to security restrictions, but the ajax request with proper authentication in the message will be delayed picture. This example bypasses all security for the sake of simplicity and simply proves that we can do something.

The best idea I could come up with is to get the stream through ajax, decode the bitmap and then render it using the canvas. Internet Explorer obviously does not support the canvas, but, fortunately, Google has provided an SVG shell called excanvas, which I can use to do this.

My code (picture code works, bmp decoding is not much)

http://gist.github.com/614328

Future support for images other than BMP is believable, and because of the way the canvas works, it's easiest to draw pixels in RGBA. Texture2D is essentially a wrapper class for an RGBA byte array, plus a drawing code. ByteStream makes this a bit easier in the eyes of the byte array, and BitmapDecoder contains a method to convert the BGR format to RGBA texture2d for drawing.

Is it possible that bytes are getting translated incorrectly along the way or is there something in my decoding logic?

FYI, I got the file specification from Wikipedia:

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

Any idea what happens in the decoding logic or the drawing logic causing my BMP to draw incorrectly?

Answer 1

• VBScript responseBody
• , , , , .

:

http://gist.github.com/616240

Answer 2

( ) : base64 BMP ( , ), URI :

<script type="text/javascript">
  function fetchBmp() {
    $.get('http://localhost:3168/experimental/imgrender/beta.bmp', function (data) {
      var base64Data = $.base64.encode(data); // *

      $('#my-image').attr('src', 'data:image/bmp;base64,' + base64Data);
    });
  }

  // * Lots of plugins for this, e.g. http://github.com/carlo/jquery-base64
</script>    

<img id="my-image" />

URI ( IE8 - IE7), BMP.

casablanca, Ajax, google .

Answer 3

XMLHttpRequest (aka AJAX) , , ( ) . .

, Firefox , : .