BMP décodage en JavaScript et le dessin à l'Explorateur Toile

Question

Je dois télécharger un fichier BMP avec JavaScript et rendre à l'écran, dans Internet Explorer. Tout d'abord, oui, je sais que c'est fou, je ne vais pas entrer dans pourquoi, nous allons accepter juste pour un instant que img src ne fonctionne pas en raison des contraintes de sécurité, mais une demande ajax avec l'authentification correcte dans la volonté post retirer l'image. Cet exemple court-circuite toute la sécurité pour des raisons de simplicité et prouve que nous pouvons rendre quelque chose.

La meilleure idée que je pouvais trouver était d'aller chercher le flux via ajax, décoder le bitmap, puis le rendre avec la toile. Internet Explorer ne peut évidemment pas soutenir la toile, mais heureusement, Google a fourni une enveloppe au format SVG appelé excanvas que je peux utiliser pour cela.

Mon code (code de dessin semble fonctionner, bmp décodage pas tant)

http://gist.github.com/614328

Le futur soutien d'autres images en plus BMP est plausable, et à cause de la façon dont fonctionne la toile, il est plus facile de dessiner des pixels dans RGBA. Texture2D est essentiellement la classe encapsuleur pour un tableau d'octets RVBA, plus le code de dessin. ByteStream rend un peu plus facile sur les yeux traitant du tableau d'octets, et BitmapDecoder contient la méthode pour traduire le format BGR RGBA Texture2D pour le dessin.

Est-il possible les octets OBTIENNENT mal traduit le long du chemin ou est-il quelque chose qui cloche avec ma logique de décodage?

Pour votre information, je suis la spécification de fichier de wikipedia:

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

Toute idée de ce qui se passe dans la logique de décodage logique ou le dessin qui est la cause de mon BMP pour dessiner de façon incorrecte?

Answer 1

La solution est une combinaison de deux choses

1. un peu de VBScript pour lire les octets bruts de responseBody
2. décoder les données d'octets correctement, chaque pixel est pas rembourré comme l'article de wikipedia indique, il est en fait chaque ligne de balayage qui est rembourré à la taille dword.

Code de travail:

http://gist.github.com/616240

Answer 2

XMLHttpRequest (alias AJAX) a été principalement conçu pour le contenu du texte, il est donc possible que les données binaires (en particulier les caractères nuls) ne sont pas traduites correctement. Le premier chèque serait de comparer la taille des données récupérées avec la taille réelle du fichier.

Au moins sur Firefox, il semble y avoir un moyen de récupérer spécifiquement des données binaires, comme décrit ici: Manipulation de données binaires .

Answer 3

Voici une approche beaucoup plus facile (et beaucoup plus performants): base64 coder les données BMP (vous pouvez le faire soit sur le serveur ou le client), puis l'intégrer dans la page en utilisant un URI données :

<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" />

Tous les navigateurs modernes prennent en charge des URIs (y compris IE8 et jusqu'à - pour des solutions de contournement existent IE7), ainsi que le format BMP

.

Comme casablanca souligne, il peut y avoir des problèmes avec le chargement des données binaires via Ajax, de sorte que vous pouvez avoir à Google autour de solutions de contournement.