HTML5のJavaScriptでバイナリファイルを扱う

HTML5のFile APIではデスクトップからファイルを取得して、その内容を読むことができます。テキストとしての読み込みはもちろん、生のバイト列も読めるので、バイナリファイルも解析できます。

とりあえず手始めに16進ダンプしてみますか。

Google Chrome 9以降で動作します。その他のブラウザはまだバイナリの読み込みに対応していません。

さて、適当なJPEGファイルをドラッグアンドドロップしてダンプしてみると、先頭が ff e8 になっていると思います。全てのJPEGファイルは ff e8 で始まり、ff d9 で終わります。

こんな感じでバイナリを見ていけば当然EXIF情報なども取得できます。ブラウザ側で画像処理を行ってサーバに送信するなんて事もできるでしょう。スマートフォンのネイティブアプリではなく、ブラウザのHTML5アプリとしてinstagramみたいなサービスも作れそうですよ。

現在のFile APIの実装状況を見ると、Chromeはほぼ完璧のようです。Firefoxはテキストの読み込みには対応していますが、バイナリの読み込みに非対応です。Safariはメタデータを取得できますがファイルの内容を読めません。IEはFile API自体が実装されていません。