3DS MPO画像ファイルの表示テスト2 - Javascript
3DSなどで使用するMulti-Picture Format(以下MPO)画像をPCで表示するテスト。
前回の続き。PCでの見栄えは前回なんとなくわかったので、今回はロジック部分を重点的に色々技術テストしてみた。
JavaScriptでMPOファイル内の画像を直接閲覧
Multi-Picture Format 閲覧テスト４ JavaScriptテストページ
MPOをJavascriptで直接読みこみ2枚の画像に分けて表示する。
本来はJavascriptでバイナリーファイルを直接操作できないので以下のロジックを使用する。
- XMLHttpRequestでMPOファイルを読む。
- App1 Exifをマーカーとしてバイナリを分割する。
- 分割されたバイナリをbase64エンコードし、RFC2397でメディアタイプJPEGとして表示する。
ぱっと思いつく制限
- Ajaxの仕様として許可されていないドメイン外サーバーのファイルを読めない。
- Firefox以外、特にIEではJavascript仕様が違うので読めない。
- 表示画像単体のURLがとんでもなく長くなるので単体表示すると重い。
対応ブラウザ(時々追記)
- × Internet Explorer 8 (64bit含む)
- ○ Mozilla Firefox 4.0
- ○ iOS Safari 5.0 (重い)
JavaScriptでMPOファイル内の画像を2重表示
Multi-Picture Format 閲覧テスト５ 透過画像テストページ
2枚の画像のうち表側を透過表示してみる。画像透過のopacityはCSS3の機能だ。スクリプトでの重ね合わせなので当然移動可能。
JavaScriptでMPOファイル内の画像を点滅表示
Multi-Picture Format 閲覧テスト６ 画像点滅テストページ
前回Flashで作成した表示方法をJavascriptで再構成してみた。
後書き
本来であればMulti-Picture Formatの仕様書どおりに画像を読んで分割したかったが、頭が悪くて仕様書が読み解けなかった(笑)
また、最適化とか考えていない段階なので無駄なループがあったりしてソースコード上からも頭の悪さが読み取れたりします。(笑)
