BMP decodifica in JavaScript e disegno per Explorer Canvas

Question

Ho bisogno di scaricare un file BMP con JavaScript e rendere allo schermo, in Internet Explorer. Prima di tutto, sì, so che questo è pazzo, non ho intenzione di entrare in perché, diciamo solo accettare per un momento che img src non funziona a causa di vincoli di sicurezza, ma una richiesta AJAX con il corretto di autenticazione nel post volontà tirare indietro l'immagine. Questo esempio bypassa tutta la sicurezza per ragioni di semplicità e dimostra solo noi possiamo rendere qualcosa.

L'idea migliore che potrei venire con era quello di recuperare il flusso tramite la tecnologia AJAX, decodificare il bitmap e quindi renderlo con tela. Internet Explorer, ovviamente, non supporta tela, ma per fortuna Google ha fornito un wrapper per SVG chiamato excanvas che posso usare per questo.

Il mio codice (codice di disegno sembra funzionare, bmp decodifica non tanto)

http://gist.github.com/614328

il supporto futuro per altre immagini, oltre BMP è plausable, ed a causa di come funziona la tela è più facile disegnare pixel in RGBA. Texture2D è essenzialmente la classe wrapper per un array di byte RGBA, più il codice di disegno. Bytestream rende un po 'più facile per gli occhi che si occupano con l'array di byte, e BitmapDecoder contiene il metodo di tradurre il formato BGR a RGBA Texture2D per il disegno.

E 'possibile i byte sono sempre mis-tradotto lungo la strada o c'è qualcosa che non va con la mia logica di decodifica?

Cordiali saluti, ho avuto il file spec da wikipedia:

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

Qualche idea di quello che sta succedendo nella decodifica logica o disegno logica che sta causando il mio BMP per disegnare in modo non corretto?

Answer 1

La correzione era una combinazione delle due cose

1. un po 'di VBScript per leggere i byte grezzi di responseBody
2. decodifica dei dati byte correttamente, ogni pixel non viene riempito come l'articolo wikipedia suggerisce, in realtà ogni linea di scansione che è allungato alla dimensione dword.

Codice di funzionamento:

http://gist.github.com/616240

Answer 2

XMLHttpRequest (aka AJAX) è stato progettato principalmente per il contenuto del testo, quindi è possibile che i dati binari (specialmente caratteri nulli) non vengono tradotti correttamente. Il primo controllo è quello di confrontare le dimensioni dei dati recuperati con la dimensione effettiva del file.

Almeno su Firefox, sembra che ci sia un modo per specificamente recuperare dati binari, come descritto qui: Gestione dati binari .

Answer 3

Ecco un approccio molto più semplice (e di gran lunga più performante): base64 codificare i dati BMP (è possibile farlo sia sul server o client) e quindi incorporare nella pagina utilizzando un dati 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" />

Tutti i browser moderni supportano URI di dati (tra cui IE8 e fino - per soluzioni alternative IE7 esiste), così come il formato BMP

.

Come casablanca fa notare, ci possono essere problemi con il caricamento di dati binari tramite Ajax, in modo da avere a google intorno per soluzioni alternative.