2011-08-05 10 views
1

HTML5でイメージ操作サービスを作成する予定です。 1つの目標は、匿名ユーザーに対してサービスが機能することです。ローカルストレージとローカルファイル

  • ユーザが画像(ファイルを開くダイアログ/ドラッグ&ドロップ)を追加
  • ユーザー
  • ユーザーは今すぐ結果

を保存し、ブラウザで画像を操作し、ここでのトリックはそのブラウザです(ユーザーがいる、ノートパソコンのバッテリーが空いている、など...)私たちはここで何らかの自動保存をして進捗を記録したいと思っています。これは、ページ上に、好ましくはオフラインで追加された画像のトラックを維持することを意味する。

質問は、どういうわけかローカルで自動的に保存されたファイルや画像をユーザーがページに追加したか、またはユーザーが大文字と小文字のページに追加したすべての画像を再入力するように強制できますか再ロードされますか? localStorageはローカルファイルオブジェクトまたは参照をサポートしていますか?

+0

検討していましたか?ローカルストレージはページを更新しても残っています... – PhD

答えて

1

はい、自動保存機能を実装できます。

HTML5 Canvas APIを使用して、ユーザーがブラウザで画像を操作できるようにすることができます。次に、toDataURLメソッドを使用して、画像のデータURLを取得できます。それを取得したら、それをlocalstorageに保存することができます。今のところlocalstorageに文字列だけを保存することができます。 Specは、objectをlocalstorageに保存できると言っていますが、ほとんどのブラウザはオブジェクトをサポートしていません。

setIntervalメソッドを使用して、イメージを定期的に保存することができます。

+0

問題は、dataURIが写真でかなり大きなイメージになることです。例えば。 PNGイメージとしての1920 x 1080フルHD写真は数メガバイトです。私はlocalStorageがメガバイトまで記憶できるとは思わない。 –

+0

5メガバイトを使用できます。私はそれがイメージのために十分だと思う。 http://dev.w3.org/html5/webstorage/#disk-space –

+0

しかし、いくつかの画像には十分ではありません:( –