CanvasとFileAPIを使用して、リサイズした画像をoracleに保存したい

いつもお世話になっております。
現在、実装した機能に対する方法を考えていますが、
あまりスムーズとは思えません。
よりスマートな方法がございましたらご教授いただけないでしょうか。

###ソフトウェア
PHPを使用した、スマホ上ブラウザで動くwebアプリケーション

###実装したい機能
1.撮影画面にて、「撮影」ボタンで、スマホで撮影orカメラロールから画像を選択する。（最大５枚）
2.画面にサムネイルを表示させる。
3.「送信」ボタンで画像をサーバーに送信する。
4.サーバーではoracleに保存する。
5.画面遷移後、再び撮影画面を表示した際に、送信済みの画像のサムネイルを表示させる。

※スマホで撮影した画像はサイズが大きいので、リサイズしてDBに保存されるようにしたい。
※画面遷移するたびに、スムーズに画像のサムネイルを表示したい。
※oracleとの接続にはoci8を利用する。

###考えた方法

画像保存

-ローカル
1.FileApiで撮影orカメラロールから選択（input type = “file”）
2.canvasでリサイズするオリジナル→小さいサイズ（500500以内）・サムネイル（200200以内）の２種
参考URL1
参考URL2
3.imgタグでサムネイルの方を表示する
参考URL
4.canvasから出力できるPNG（base64）をblobに変換して２種の画像をPOST
参考URL

-サーバー
5.受け取った２種のblobデータをフォルダに保存
参考URL
6.フォルダに保存されているデータをOCi8にてoracleに保存
参考URL

画像表示

1.サムネイルをGETされたらblobデータを書き出す。（サムネイルの方）
2.imgタグでサムネイルを表示する。

以上です。

何かもっと簡単に実現できそうな方法やライブラリなど、
アドバイスがありましたら、どうぞ宜しくお願い申し上げます。

行動規範の内容に同意します

回答3件

数か月経過してますが、ベストアンサーがついてたので気になりました。
「数MBもある画像データをモバイル環境からサーバ側に送信してサーバ側でリサイズする」という方法が支持されていますが、そうは思いません。モバイル環境においてはデータ通信は従量制のものが多いですし、なるべく小さいサイズのデータをやりとりするように考えることがよいデザインだと思います。
つまり質問者様の最初の考え通り、クライアント側でJavaScriptでCanvasに描画してリサイズするのがいいでしょう。すぐ終わる処理です。負荷にはなりません。

投稿2016/02/19 02:05

退会済みユーザー

総合スコア0

Chumi

2016/02/19 02:41

時間が経ってしまった質問ですが、コメントありがとうございます。いただいた回答にベストアンサーはつけましたが、実際には上記のような処理を実装させていただきました。回りくどいことをしましたが、今のところ端末での処理速度もまったく問題がありません。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

画像の縮小は重い処理ですし、クライアント（特に、モバイル環境）で行わせるのは負荷になるだけです。

PHPにもImageMagickなどの画像処理ツールを使えますので、画像はそのままmultipart/formdataでPOSTしてもらってから、サムネイルはPHPで生成する、というのが適当な処理だと考えます。

投稿2015/11/18 05:18

編集2015/11/18 05:18

maisumakun

総合スコア145183

Chumi

2015/11/18 05:31

ありがとうございます。確認してみます。ただ、通信の懸念事項としまして、スマホで撮影したオリジナルの画像（２M弱）をそのまま送りたくないということがあります。１画面にて最大５枚は添付できるようにしたいので。。。そのために縮小して送ることを考えたのですが、それによって処理が重くなるのも確かに問題ですね。どちらかを我慢するしかないのでしょうか。

行動規範の内容に同意します

初めまして
maisumakunさんに同意見です。