iOS 6 より Safari からファイルをアップロードできるようになり、写真投稿が必要なウェブサービスで、投稿のためだけにアプリを用意する必要はなくなったかなあ、と最初は思っていました。

ところが、iPhone 5 などで撮った写真などはファイルサイズが結構大きく、Safari からアップロードするときはそのままのサイズで送るため、外出先で 3G だとアップロードにものすごく時間がかかってしまい、ほとんど使い物になりません。

そこで、アップロード前にブラウザ側で写真をリサイズできる方法はないかと探したところ、

»IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously - Stack Overflow

で紹介されていた

»Javascript canvasResize Plugin

というプラグインが使えそうだったので、paperclip と一緒に組み込んだ Rails のサンプルアプリを作ってみました。

»champierre/canvas_resize_sample · GitHub

canvasResize Plugin でファイルをリサイズした結果を DataURI にした上で、それを hidden で送信するようにしています。

既存のプロジェクトに導入する場合の手順は README に記したので、上記 GitHub のリンク先を参照してください。

いま作っているウェブサービスにさっそく導入してみて、iPhone 5 で撮った写真のアップロードに要する時間を計測してみたところ、3G回線で通常は1分近くかかっていたのが、300px x 300px 以内にリサイズした上でアップロードしたところ、10秒弱と爆速になりました。

扱えるのが jpg のみ（写真だけの場合は問題ないはずですが。。）だったり、極端に小さいサイズのファイルではエラーになったりというサンプルですが、よかったら参考にしてみてください。

また、実装方法などでもっといい方法があったら、コメントなどで教えていただけるとありがたいです。