Canvasを使ってクライアントサイドで画像リサイズ「canvasResize」
canvasResizeはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
iPhoneでWebブラウザから写真をアップロードできるようになりましたが、カメラの性能が高いためにファイルサイズが大きくなってしまっています。そこでクライアントサイドでリサイズできるcanvasResizeを使ってみましょう。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.34.37.1375706669.png)
ファイルを指定した表示です。自動的にリサイズされます。
[](http://images.moongift.jp/2013/08/2013-08-05 10.36.56.1375706673.png)
iPhoneからです。Choose fileをタップします。
[](http://images.moongift.jp/2013/08/2013-08-05 10.36.59.1375706675.png)
カメラまたはライブラリから写真を選択します。
[](http://images.moongift.jp/2013/08/2013-08-05 10.37.27.1375706678.png)
プレビューが表示されます。この時点で縮小済みです。
canvasResizeではCanvasを使ったリサイズとプレビュー表示に加えて、iPhoneで大きなサイズの写真を指定した際に潰れてしまう問題を解決するライブラリや、Exifの回転を読み取るライブラリが組み合わさって提供されています。
MOONGIFTはこう見る
canvasResizeで提供されている機能はスマートフォン向けにファイルアップロード機能を提供しようと思った人であれば誰しもが経験しているであろうトラブルを解決できるナレッジが詰まっています。
自分自身がハマった問題は他の人もハマる可能性が高いです。それをブログに記載したり、ソフトウェアという形にして提供すればみんなの役に立つはずです。自分自身が困った時こそ、そのチャンスと言えるでしょう。