ウェブページにローカル写真を添付し​​てください

Question

私はフィールド生物学の教授援助者として使用するWebアプリケーションに取り組んでいます。これはクロスプラットフォームを目指しており、javascript/Jquery/Jquery mobileを使用して構築されています。アプリは植物や動物の説明と写真を表示し、生徒はローカルストレージを使用して自分のメモを保存することができます。学生が離れた場所で働いている可能性があり、現在はこれを達成するためにappcacheを使用しているため、オフラインで作業することが不可欠です。

生徒が生物の写真を撮り、自分の写真を説明ページに追加する機能を追加したいと思います。つまり、ローカルファイルを動的にウェブページに追加します。私はCamera APIを使用してブラウザから直接写真を撮ってからページ内に表示することができました。しかし、私は後で写真を呼び戻す方法を考え出すことができませんでした。私はこれが不可能であることを示唆するいくつかの参考文献を見つけました。他のものは写真をローカルストレージにエンコードすることを提案しています（私のニーズはローカルストレージの容量をはるかに上回ります）。

これはどのような方法で実現できますか？私は答えが明らかな場合は謝罪し、私は初心者です、私は一緒に勉強しようとしています！

Answer 1

エンコードしてテキストとして保存する必要があります（base64エンコーディングはほぼ確実に最も簡単です）。ローカルストレージはかなり速くいっぱいですが、唯一のオフラインストレージ機能ではありません。現代のブラウザはすべてIndexedDBをサポートしていますが、容量についてはいくつかの質問がありますが、主にハードドライブのサイズによって制限されています。

this gistがまだ動作するかどうかわかりませんが、記憶容量の目安にしてください。 This articleはChromeとFirefoxのサイズが十分に大きいことを示しています（IEはその時点で実装されておらず、Safariは多くの点で壊れていました）。