iOS6でファイルアップロードが可能になってから、「iPhoneのカメラで撮影した画像のリサイズ、トリミングをフロントエンドで行いたい」という想いは持ち続けていました。
しかし、それを実現するためには、
- iOS画像リソース制限問題
- Exifで回転して表示してしまう問題
の2点を乗り越える必要がありました。
しかし、 iPhone 4s以降では画像リソースを気にしなくても良いっぽい ことがわかり、 JavaScriptでExif情報を読み取ることができる こともわかったいま、この想いを阻むものはなくなりました。
kimizuka.hatenablog.com
kimizuka.hatenablog.com
あーして、こーして、ほいっとやって、
そして完成したものがこちら。
https://github.com/kimizuka/ios-cameragithub.com
DEMO
https://kimizuka.github.io/ios-camera/?kimizuka.github.io
https://kimizuka.github.io/ios-camera/
※ iOSでご確認ください
操作方法
アクセスするとこんな感じです。
- を押すとメニューが表示されます。
写真を撮影してみましょう。
写真の中心を正方形にトリミングして表示されます。（短辺を480pxにリサイズしているので若干画像が荒れます）
スワイプ操作でトリミング位置をピンチで倍率を操作できます。
PRINTボタンを押すと画像をトリミングした結果を別タブで開きます。
ROTATEボタンを押すと時計回りに90度回転します。（トリミング位置はリセットされます）
CHANGE PHOTOボタンを押すと写真を選びなおすことができます。
解説
- 選択された写真のExif情報を読み取って回転を補正
- 短辺を480pxにリサイズ
- 正方形のcanvasに対して画像中心がCanvasの中心になるように描画
- スワイプ・ピンチに合わせて描画位置、サイズを更新
- PRINTをタップされたときにCanvasの描画内容をbase64化
という処理を行っています。
機会があればご利用ください。
