読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

iPhoneのカメラで撮影した画像の回転を補正してSafariにプレビューをし、リサイズ・トリミングをフロントエンドで行いたいという想い

iOS JavaScript

iOS6でファイルアップロードが可能になってから、「iPhoneのカメラで撮影した画像のリサイズ、トリミングをフロントエンドで行いたい」という想いは持ち続けていました。

しかし、それを実現するためには、

  1. iOS画像リソース制限問題
  2. Exifで回転して表示してしまう問題

の2点を乗り越える必要がありました。

しかし、 iPhone 4s以降では画像リソースを気にしなくても良いっぽい ことがわかり、 JavaScriptでExif情報を読み取ることができる こともわかったいま、この想いを阻むものはなくなりました。

kimizuka.hatenablog.com
kimizuka.hatenablog.com

あーして、こーして、ほいっとやって、

そして完成したものがこちら。

github.com


DEMO

kimizuka.github.io

f:id:kimizuka:20160818082646p:plain
https://kimizuka.github.io/ios-camera/


※ iOSでご確認ください


操作方法

f:id:kimizuka:20160818084340j:plain
アクセスするとこんな感じです。



f:id:kimizuka:20160818084513j:plain

  1. を押すとメニューが表示されます。

f:id:kimizuka:20160818084937j:plain
写真を撮影してみましょう。



f:id:kimizuka:20160818085053j:plain
写真の中心を正方形にトリミングして表示されます。(短辺を480pxにリサイズしているので若干画像が荒れます)
スワイプ操作でトリミング位置をピンチで倍率を操作できます。



f:id:kimizuka:20160818085436j:plain
PRINTボタンを押すと画像をトリミングした結果を別タブで開きます。



f:id:kimizuka:20160818085708j:plain
ROTATEボタンを押すと時計回りに90度回転します。(トリミング位置はリセットされます)



f:id:kimizuka:20160818085755j:plain
CHANGE PHOTOボタンを押すと写真を選びなおすことができます。


解説

  1. 選択された写真のExif情報を読み取って回転を補正
  2. 短辺を480pxにリサイズ
  3. 正方形のcanvasに対して画像中心がCanvasの中心になるように描画
  4. スワイプ・ピンチに合わせて描画位置、サイズを更新
  5. PRINTをタップされたときにCanvasの描画内容をbase64化

という処理を行っています。
機会があればご利用ください。