2

iPhoneの写真の容量平均が約3MB。画像を20枚一括でセレクトした場合、60MBのデータをローカルに記憶しなければいけません。

  • localStorageの容量が約5MB
  • WebSQLの容量が約50MB

これでは、選択された画像をローカルに保存するのは難しそうです。

そこで、<input type="file">で取得したFileオブジェクトをローカルストレージに保存することで、ページを更新またはブラウザを再起動したあとも、保存されたFileオブジェクトを利用して画像を再読出するという方法を思いついたのですが、これは実現できますか?

多分ムリだと思うので、その場合他に良い解決方法はありませんでしょうか?

1 件の回答 1

3

html5での<input type="file">はJSのサンドボックス外にあるローカルのファイルにアクセスするので、
セキュリティ上ユーザーのアクションが無いと実体への参照を作成できない特殊なfileオブジェクトです。

ローカルストレージから参照情報を取り出すとユーザーアクションが無いので
fileオブジェクトとしての実体参照は出来ません。
また、ローカルストレージは基本的に文字列として保存するので
画像をbase64等の確実に保存できる形式に変換すると容量オーバーする可能性が有ります。
参考
https://web.archive.org/web/20140818003911/http://blogs.msdn.com:80/b/osamum/archive/2012/03/05/html5api.aspx
http://d.hatena.ne.jp/a_bicky/20130203/1359893593

他の方法を挙げるとすれば、fileオブジェクト実装以前から使い古された
サーバー側に画像データを保存するやり方が有ります。

  • 一時ファイルとしてサーバーにアップロードしてローカルストレージかクッキーに認証情報を保存。
  • 表示するときはサーバーから取ってきて表示。
    ※一定期間使用されない一時ファイル画像はサーバー側で自動削除しておくことを推奨。

尤も合計60Mの画像容量は送信するにも大きすぎるので、
圧縮するとか、バックグラウンドで個別に送信しておくとか、
一括送信時はサーバー上の一時保存ファイルを
直接サーバー側で処理するとか、何か考えた方が良いでしょうね。

2
  • 最終的にサーバに必要な情報はcanvasを使ってトリミングされたデータになるので、途中保存の仕様が無ければ、60mbもの膨大なデータをサーバに送信する必要もなかったのですが、やはり難しいようですね><
    – hojo
    2015年3月18日 6:07
  • @hojo さん 1ファイル選択する毎にトリミングさせるようにすれば保存できる容量に抑えられませんか? 複数一気に選択した場合はトリミング完了してない画像は保存対象外にするとかで。 素の写真をブラウザ上で画像加工してから送信していいのであれば、 必要とする解像度によってはファイル選択されたら読み込んだ画像の解像度を下げるとかでも効果がありそうですね。 1枚辺り3Mbのjpeg?画像とすると 4000*3000 強位の解像度でしょうが… トリミング前だとしてもweb上で利用するには巨大すぎますから。 2015年3月18日 8:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。