HTML5オフラインアプリケーションで画像を操作しますか？

Question

HTML5を使用してオフラインアプリケーションを作成しました。これは、indexedDBまたはlocalStorageにデータを格納することです。オンラインの場合、ローカルストレージとオンラインデータベースは同期されます。画像をアップロードする機能を追加するまでは、すべて問題ありません。

1）アプリケーションはオフラインで動作するので、サーバーに画像をアップロードすることはできません。どこに配置するのですか？

可能なソリューション：

• オフライン、ユーザーがオンラインになったときに、パスを保存し、入力要素を作成し、その値の属性にパスを割り当てることにより、画像をアップロードします。このアプローチの問題は、入力要素のvalue属性を変更できず、アップロードする画像の完全なパスを取得できないことです。この解決法は本当に可能ではないようです。
• イメージをindexedDBまたはlocalStorageに保存することは可能ですか？

2）イメージをindexedDBまたはlocalStorageに正常に保存すると、ユーザーはオンラインになったらどのようにアップロードするのですか？

可能なソリューション：

• のWebSocket - 私はまだこれには触れていません。
• Flash - iPhoneで動作しますか？おそらくそうではありません。

3）イメージをindexedDBまたはlocalStorageに正常に保存した場合、そのイメージをページにどのように表示しますか？イメージ要素はsrc属性を使用して表示するイメージを決定しますが、イメージバイナリのような他のメソッドはありますか？

同じ状況に直面した場合は、目標を達成するためにどのような回避策を実行しましたか？

Answer 1

HTML5で利用可能なFileAPIを使用してください。そこにあなたのイメージを「アップロード」することができます。そして、サーバがオンラインに戻ると、伝統的なXHRを使っても、サーバを転送することができます。 http://caniuse.com/#feat=fileapi

詳細：

1））我々のアプリケーションで定義されている（permamentまたはtemporaryストレージにファイルを書く

FileAPIは、主要なブラウザのほとんどがそれをサポートとして使用しても安全です。 temporaryストレージは、セッションが終了すると消去されます（ブラウザの裁量で）。

は、チュートリアルのためにここを参照してください：http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript

2）私はそれらを送信するために、伝統的なXHRequestsを使用します。これは簡単でよくテストされています（最初から新しいプロトコルを設計する必要はありません）。

3）これが最善のことです。File APIから正しいURLを取得できるため、画像はキャッシュから表示されます。ここをクリックしてください：http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript#toc-filesystemurls