在网页中包含本地照片

Question

我正在开发一个网络应用程序，我将使用它作为野外生物学的教具。这旨在成为跨平台，并且正在使用 javascript/Jquery/Jquery mobile 构建。该应用程序显示学生可能看到的植物和动物的描述和照片，并允许学生使用本地存储保存自己的笔记。离线工作很重要，因为学生可能在偏远的地方工作，目前我正在使用 appcache 来实现这一点。

我想添加允许学生拍摄生物照片然后将他们自己的照片添加到描述页面的功能（即动态地将本地文件添加到网页中）。我已经设法使用相机 API 直接从浏览器拍摄照片，然后在页面中显示它们。但是，我无法弄清楚如何在以后调用照片。我发现一些参考资料表明这是不可能的，其他人建议将照片编码到本地存储（尽管我认为我们的需求将远远超过本地存储的容量）。

有什么方法可以实现吗？如果答案很明显，我深表歉意，我是新手，正在努力学习！

Answer 1

您需要对它们进行编码并将它们存储为文本（base64 编码几乎肯定是最简单的），本地存储可能会很快填满，但它不是您唯一的离线存储设施。所有现代浏览器都支持 IndexedDB，虽然在容量方面存在一些问题，但很大程度上您只受到硬盘大小的限制。

我不知道this gist 是否仍然有效，但看起来它应该可以让您大致了解存储容量。 This article 表明 Chrome 和 Firefox 足够大（当时 IE 还没有实现，而 Safari 在很多方面都被破坏了）。