JavaScriptでのBMPデコードとエクスプローラーキャンバスへの描画

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

質問

JavaScriptを使用してBMPをダウンロードし、Internet Explorerで画面にレンダリングする必要があります。まず、はい、私はこれが非常識であることを知っています、私は理由に入るつもりはありません、IMG SRCがセキュリティの制約のために機能していないことをちょっと受け入れましょうが、投稿に適切な認証を伴うAJAX要求は画像を引き戻します。この例は、シンプルさのためにすべてのセキュリティをバイパスし、何かをレンダリングできることを証明しています。

私が思いつくことができる最良のアイデアは、Ajaxを介してストリームをフェッチし、ビットマップをデコードしてからキャンバスでレンダリングすることでした。 Internet Explorerは明らかにCanvasをサポートしていませんが、幸運なことにGoogleはSVGにExcanvasと呼ばれるラッパーを提供しました。

私のコード（描画コードが機能しているように見え、BMPデコードはそれほど多くありません）

http://gist.github.com/614328

BMP以外の他の画像の将来のサポートはもっともらしいものであり、Canvasの仕組みにより、RGBAでピクセルを描画するのが最も簡単です。 Texture2Dは、基本的にRGBAバイト配列のラッパークラスと描画コードです。 BYTESTREAMは、バイト配列を扱う目で少し簡単になり、BitMapDecoderには、描画用のRGBA Texture2DにBGR形式を変換する方法が含まれています。

バイトが途中で誤って翻訳されている可能性はありますか、それとも私のデコードロジックに問題があるのでしょうか？

参考までに、ウィキペディアからファイル仕様を入手しました：

http://en.wikipedia.org/wiki/bmp_file_format#bitmap_information_.28dib_header.29

デコードロジックや描画ロジックで何が起こっているのか、BMPが間違って描かれていることがありますか？

役に立ちましたか？

解決 3

修正は2つのことの組み合わせでした

  1. 応答ボディの生のバイトを読むための少しのvbscript
  2. バイトデータを適切に解読すると、各ピクセルはウィキペディアの記事が示唆するようにパッドではありません。実際、それぞれのスキャンラインはdwordサイズにパッドにされています。

作業コード：

http://gist.github.com/616240

他のヒント

XMLHttpRequest （別名Ajax）は主にテキストコンテンツ用に設計されていたため、バイナリデータ（特にヌル文字）が正しく翻訳されない可能性があります。最初のチェックは、取得したデータのサイズを実際のファイルサイズと比較することです。

少なくともFirefoxでは、ここで説明するように、バイナリデータを具体的に取得する方法があるようです。 バイナリデータの処理.

以下は、はるかに簡単な（そして非常にパフォーマンスが高い）アプローチです。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" />

すべての最新のブラウザは、BMP形式と同様に、データURI（IE8およびUP- IE7ワークアラウンドを含む）をサポートしています。

Casablancaが指摘しているように、Ajaxを介してバイナリデータをロードすることに問題がある可能性があるため、回避策のためにGoogleをGoogleにする必要がある場合があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top