背景

iOS6になりinputタグのtype=fileの指定が可能になった。
これにより、iPhoneから写真のアップロードが非ネイティブアプリで
可能になった。

しかし、サーバーにファイルをアップロードする分には問題ないのだが、
とはいえ、カメラロールの写真のサイズはそれなりにデカい。
クライアントサイドで扱えないか？
となるわけですが、カメラロールの写真のサイズはMobile Safariで
扱える画像サイズを遥かに超えており、困った。

何とかしてみた

サーバーにアップロードできるんだから、
内部的には、あるていど画像データを扱えているのだろう？
何か方法は無いものかと途方に暮れいた2012年。。

ローカルファイルをバイナリーデータとして読み込めることを知る

先日、File APIでDataURLとして読み込まず、素のバイナリーに近い
形で扱える。FileReader#readAsBinaryStringなるメソッドを
Google DriveのAPIをJavaScriptで叩こうとしていた際に知った。
さらに調べると、バイナリ配列として扱える
FileReader#readAsArrayBuffer
があった！

ニヤリ。

JPEGデコーダはやっぱりあるし。

今回はjpgjsを使用。
撮影時の回転情報を反映してくれないが、それはおいおい。

これらをまとめると

var item = document.getElementById('picInput').files[0];
var reader = new FileReader();
reader.onload = function (e) {
    var j = new JpegImage();
    var buffer = new Uint8Array(reader.result);
    j.parse(buffer);

    var c = document.getElementById("filterdImage");
    // 算数苦手なので、10分の1にとりあえず指定して、画像サイズを小さくする。
    c.width = j.width / 10;
    c.height = j.height / 10;
    var ctx = c.getContext("2d");
    var d = ctx.getImageData(0, 0, j.width / 10, j.height / 10);
    j.copyToImageData(d);
    ctx.putImageData(d, 0, 0);
};
reader.readAsArrayBuffer(item);

サンプルはJsdo.itに

iOS6で扱える画像サイズの制約をかわせるかの実験

2013年今年もよろしくお願いします。

追記（2014/9/24）

iOS8では、jpgjsでqt[i]が未定義とエラーが出て動かないようです。

iOS6でクライアントサイドオンリーでカメラロールの画像を扱う

背景