BMP decodificación en JavaScript y dibujo al Explorador de lienzo

Question

Es necesario descargar un archivo BMP con JavaScript y volverlo a la pantalla, en Internet Explorer. En primer lugar, sí, sé que esto es una locura, no voy a entrar en por qué, vamos a aceptar por un momento que img src no está funcionando debido a las restricciones de seguridad, pero una petición AJAX con la debida autenticación en el puesto voluntad tirar de la imagen. Este ejemplo no pasa por toda la seguridad en aras de la simplicidad y sólo demuestra que podemos hacer algo.

La mejor idea que podía venir fue a buscar a la corriente a través de AJAX, decodificar el mapa de bits, y luego hacerla con una lona. Internet Explorer, obviamente, no es compatible con la lona, ??pero por suerte Google proporciona un envoltorio a SVG llama excanvas que puedo usar para eso.

Mi código (código de dibujo aparece al trabajo, BMP decodificación no tanto)

http://gist.github.com/614328

El apoyo futuro para otras imágenes, además de BMP es plausable, y debido a cómo funciona el lienzo que es más fácil dibujar píxeles en RGBA. Texture2D es esencialmente la clase de contenedor para una matriz de bytes RGBA, más el código de dibujo. Bytestream hace que sea un poco más fácil en los ojos que se ocupan de la matriz de bytes, y BitmapDecoder contiene el método para traducir el formato BGR a RGBA Texture2D para el dibujo.

¿Es posible que los bytes están siendo mal traducido en el camino o hay algo le pasa a mi lógica de decodificación?

Para su información, me dio la especificación de archivo de Wikipedia:

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

Cualquier idea de lo que está pasando en la lógica de decodificación de la lógica o el dibujo que está causando mi BMP para dibujar de forma incorrecta?

Answer 1

La solución fue una combinación de dos cosas

1. un poco de VBScript para leer los bytes sin formato de responseBody
2. decodificar los datos de byte correctamente, cada píxel se rellena no como artículo de Wikipedia sugiere, en realidad es cada línea de exploración que está rellenada hasta el tamaño DWORD.

Código de Trabajo:

http://gist.github.com/616240

Answer 2

XMLHttpRequest (también conocido como AJAX) fue diseñado principalmente para el contenido del texto, por lo que es posible que los datos binarios (especialmente los caracteres nulos) no se traducen correctamente. El primer cheque sería comparar el tamaño de los datos recuperados con el tamaño real del archivo.

Al menos en Firefox, parece que hay una manera de recuperar los datos binarios en concreto, tal como se describe aquí: Manejo de datos binarios .

Answer 3

Aquí hay un enfoque mucho más fácil (y mucho más performante): base64 codifican los datos BMP (se puede hacer esto ya sea en el servidor o el cliente) y luego insertarlo en la página utilizando un datos 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" />

Todos los navegadores modernos soportan URIs de datos (incluyendo Internet Explorer 8 y hasta - para soluciones IE7 existe), así como el formato BMP

.

Como señala Casablanca, puede haber problemas con la carga de datos binarios a través de Ajax, por lo que puede que tenga que google en torno a soluciones alternativas.