exif-js と ios-imagefile-megapixel でスマホからの画像アップロードのプレビュー表示に対応する

画像アップロードするときにプレビュー欲しいよね〜
プレビューするとたまに画像が回転されてるよね〜
スマホだと画像選択するアプリで EXIF 情報を見て回転させて表示しているから
プレビューが横向きとかになってておかしいと思われがちだよね〜

そんな問題を解決するのが exif-js です。

exif-js

jseidelin/exif-js

使い方は https://github.com/jseidelin/exif-js/blob/master/example/index.html を見てください。
例えば、アップロードされたファイルに対して Orientation を取得する場合は以下のように記述します。

$('#jsFileInput').on("change",function(){
    var file = $(this).prop("files")[0];
    EXIF.getData(file, function(){
        var orientation = file.exifdata.Orientation;
    });
});

EXIF 情報を取得するメソッドが提供されていて、
EXIF.getTag(file, "Orientation") で Orientation を取得できるようだけど
取得できないこともあるみたい？で file.exifdata.Orientation で直接取得してしまっています。
よくわからないので動作確認してもらえればと思います。

さて Orientation は取れましたが、どうやって画像を回転しましょう。
そんな時は megapix-image.js が便利でした。

megapix-image.js

stomita/ios-imagefile-megapixel

iOS とか入っていますが気にしなくても大丈夫です。
megapix-image.js は大きな画像を表示する際に便利なライブラリですが、
回転もやってくれるので表示は全部任せてしまいましょう。
スマホからだと数 MB 〜 十数 MB の画像が平気でアップロードされるので
普通にプレビューさせようとするとブラウザごとメモリ不足で落ちることがあるのでが
megapix-image.js を使えば、そういったことが少なくなります。
(※直接は見たことないが、画面が真っ暗になるなどの報告を受けたことがあるので銀の弾丸ではない？)

さきほどの exif-js と組み合わせて使うには以下のようにします。

$('#jsFileInput').on("change",function(){
    var file = $(this).prop("files")[0];
    EXIF.getData(file, function(){
        var orientation = file.exifdata.Orientation;
        var mpImg = new MegaPixImage(file);
        mpImg.render($("#jsPreviewImage")[0], { orientation: orientation });
    });
});

まとめ

これで回転している大きな画像をプレビュー表示することができるようになったと思います。
まれに表示できないこともあるらしいので、もっと良い方法があれば教えて下さい。