BMP Decodierung in JavaScript und Zeichnung zu Explorer Leinwand

StackOverflow https://stackoverflow.com/questions/3877876

Frage

Ich brauche eine BMP mit JavaScript herunterzuladen und auf dem Bildschirm zu machen, im Internet Explorer. Zunächst einmal, ja, ich weiß, das ist verrückt, ich werde kommen nicht in warum, lassen Sie uns für einen Moment annehmen, dass img src wegen Sicherheitseinschränkungen nicht funktioniert, aber eine Ajax-Anforderung mit der richtigen Authentifizierung in der Zeit nach Willen ziehen Sie das Bild zurück. Dieses Beispiel umgeht alle die Sicherheit aus Gründen der Einfachheit und beweist nur, dass wir etwas machen.

Die beste Idee, die ich tun konnte, war der Strom über Ajax zu holen, dekodieren das Bitmap, und es dann mit Leinwand zu machen. Internet Explorer unterstützt nicht offensichtlich Leinwand, aber glücklicherweise Google bereitgestellt einen Wrapper zu SVG excanvas genannt, dass ich dafür verwenden kann.

Mein Code (Zeichnung Code zur Arbeit erscheint, BMP Decodierung nicht so viel)

http://gist.github.com/614328

Zukünftige Unterstützung für andere Bilder neben BMP ist plausable, und weil, wie die Leinwand funktioniert ist es am einfachsten Pixel in RGBA zu ziehen. Texture2D ist im Wesentlichen die Wrapper-Klasse für einen Byte-Array RGBA, plus der Zeichencode. ByteStream macht es etwas einfacher auf den Augen mit dem Byte-Array zu tun, und BitmapDecoder enthält die Methode das BGR-Format zu übersetzen, zu RGBA Texture2D zu ziehen.

Ist es möglich, die Bytes werden immer auf dem Weg-mis übersetzt oder gibt es etwas mit meiner Decodierung Logik?

Zur Info, ich habe die Datei spec aus wikipedia:

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

Jede Idee, was auf los ist in der Decodierung Logik oder Zeichenlogik, die meine BMP verursacht falsch ziehen?

War es hilfreich?

Lösung 3

Das Update war eine Kombination von zwei Dingen

  1. ein bisschen VBScript die rohen Bytes von Response zu lesen
  2. Decodierung der Byte-Daten richtig, jedes Pixel aufgefüllt wird nicht als der Wikipedia-Artikel schon sagt, es ist eigentlich jede Scanlinie, die auf dword Größe aufgefüllt wird.

Arbeits Code:

http://gist.github.com/616240

Andere Tipps

XMLHttpRequest (auch bekannt als AJAX) wurde in erster Linie für Textinhalt konzipiert, so dass es möglich ist, dass binäre Daten (insbesondere Null-Zeichen) nicht korrekt übersetzt. Die erste Prüfung wäre die Größe der abgerufenen Daten mit der tatsächlichen Dateigröße zu vergleichen.

Zumindest auf Firefox, scheint es eine Möglichkeit, um speziell binäre Daten abzurufen, wie hier beschrieben: Umgang mit binären Daten .

Hier ist ein viel einfacher (und erheblich performanter) Ansatz: base64 die BMP Daten kodieren (Sie können dies entweder auf dem Server oder das Client) und banden sich dann auf der Seite mit einem data 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" />

Alle modernen Browser unterstützen Daten URIs (einschließlich IE8 und bis - für IE7 Abhilfen vorhanden) sowie das BMP-Format

.

Wie casablanca weist darauf hin, können Probleme auftreten mit binären Daten über Ajax geladen, so dass Sie für Abhilfen müssen google um kann.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top