SPICY SPACE BLOG

愛犬家WEBエンジニアの日常。

File APIとCanvasで画像をリサイズしてアップロード

HTML5

以前自分の結婚式のために作った画像投稿サイトで、クライアント側で画像のリサイズを行う投稿フォームを作ったときのことを書きます。


自分の結婚式に写真投稿サイト作ってみた話。 - SPICY SPACE BLOG

 

HTMLで画像投稿する必要性

結婚式の来場者に、式中の写真をスマホから投稿してもらうサイトなので、

スマホで撮影した2MB近い画像を、3G回線でアップロードするにはムリがあります。

かといって撮った写真を別アプリでリサイズしてからアップして下さいっていうのはユーザーに負担をかけすぎなのでナシ。

そもそもスマホアプリとして作るというのも検討しましたが、iOSの場合、アプリを一般公開しないといけないですし、まぁ結婚式の準備と平行してiOS、Android両対応のアプリを作る余裕は全くありませんでした(笑)

ということで、Webサイト上でスマホの写真をリサイズする必要がありました。

 

実装方法

スマホのブラウザでファイルのアップロード

iOS6以降、Android2.2以降で<input type="file">でカメラの起動 or カメラロールの写真選択が可能となっています。

FileAPI

HTML5 では、File APIを介してローカルファイルにアクセスできます。

<input type="file">で指定した画像ファイルを読み込んで処理することが可能です。

参考サイト：JavaScript でのローカル ファイルの読み込み - HTML5 Rocks

ブラウザ対応状況は2014年9月時点でこんな感じです。

f:id:sp_ice:20140902121830j:plain

引用サイト：ファイル アクセス - HTML5 Rocks

 

今回の実装

  1. <input type="file">のchangeイベントを登録。
  2. 写真がアップされたら、写真のEXIF情報からOrientation（回転）情報を取得、スマホで撮った写真が正しい向きになるよう調整。
  3. 取得した写真をリサイズしてcanvasに描画。
  4. canvas上の描画データをbase64エンコードし、<input type="hidden">でテキストとしてフォーム送信。

  

実際の動きはコチラをご覧下さい。

http://da20140329.herokuapp.com/snap/post

 

ぶつかった問題

すんなりうまく行くことなんて無いのが世の常です。。。

問題① iOSで画像が潰れるバグ

こちらのサイトで詳細に説明されています。

iOSの制限として、2Mピクセルを超えるJPEG画像はサブサンプルの対象となり、情報が間引かれてしまいます。

この画像をCanvasに対してdrawImageなどしてリサイズする場合、不都合が起きます。サブサンプルされる場合とされない画像で描画の結果が異なってしまいます。

回避策として、一旦小さなCanvasに元画像の一部をコピーし、それを張り合わせて対象のCanvasにdrawImageすることで対応しました。またその際、サブサンプルされている画像とそうでないものを描画結果から判別し、サブサンプルされているものには縮尺を補正してあげるようにしています。

引用サイト：iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal

 

なんとこの現象を回避するためのライブラリ「ios-imagefile-megapixel」を公開してくださっていたので、今回利用させて頂きました。

 

問題② canvasのリサイズが汚い

今回、canvasのリサイズは問題①で使用したライブラリ「ios-imagefile-megapixel」が受け持ってくれていたのですが、

drawImageメソッドで幅、高さを指定することで実現しています。

context.drawImage(image, dx, dy, dw, dh)

このリサイズの結果が汚い！↓の記事に画像の比較がありますが、canvasの画像処理はそんなに性能がよくありません。

 参考サイト：琴線探査: HTML5 Canvasで画像のリサイズするならコレ！「JS-Image-Resizer」

こちらの記事の中で紹介されている「JS-Image-Resizer」も試してみたかったのですが、問題①対策のライブラリとマージする時間がなかったため、諦めました。。。

通常のcanvasでのリサイズよりかなりキレイな仕上がりになるようです。

 

問題③ canvasの描画データをbase64エンコードするときに ブラウザが落ちる 

機種変前に使用していたiPhone4が手元にあったので、こちらで試してみたところ、ブラウザが落ちてしまいました。

どこで落ちているのか、少しずつコメントアウトしながら検証した結果、

var imgData = resCanvas1.toDataURL();

 ↑ここでした。toDataURLはcanvasで描画したデータを、Base64エンコードした文字列で取得するメソッドです。

ここのjsの処理がiPhone4のスペックでは足りないようです。

結婚式に来ていただくゲストに「このサイト、落ちちゃうんだけど…^^;」なんて言わせたくありません…

iPhone4ならもしかしてまだ使っている人もいるかも、Androidの古い機種はもっとスペック低いんじゃないか…という心配から、

せめてiPhone4で落ちない程度の画像サイズにするという結論に至りました。

その結果、300✕400に収まる画像サイズまで落として描画することにしました。ただでさえcanvasのリサイズで汚くなっているのに、このサイズはRetinaディスプレイで見るともう悲惨です。

ここは本当に妥協してしまったので、もう少し対応機種を絞れば良かったかなぁというのが反省点です。

 

まとめ

 

なんとか無理矢理使ってみたけど問題は山積みです。

  • iOSで画像が潰れるバグ
  • canvasのリサイズは性能が悪い
  • スペックの低いスマホ端末ではブラウザが落ちる

現状では、フォーム投稿時のサムネイルに使う程度なら有用かと思います。

どうしてもスマホからWebで画像アップロードするときは、対応機種を絞ればこの方法でも行けそうです。

それにしても画像を投稿するコンテンツはどう考えてもネイティブアプリで作った方がいいですね。リサイズなんて当たり前にできますし、アプリをインストールする敷居もどんどん下がってますしね。