javascript - 使用 IndexedDB 保存图片

Question

<img src="picture_1.png" id="imgHolder"/>

希望在单击按钮时使用 indexedDB 将图像保存在名为 Images 的数据库中。

<button id="write" onclick="saveToDB()">Save To DB</button>

另一个按钮将从图像数据库中读取图像以显示在 <div id="resultContent"/> 中.

<button id="read" onclick="readFromDB()">Read from DB</button>  

Answer 1

总体思路是:

1. 创建一个具有指定名称的数据库。为此使用 indexedDB.open()。
2. 创建一个objectStore。
3. 以 blob 形式读取文件(在你的例子中是图像)。为此使用 XMLHttpRequest。
4. 创建数据库事务。
5. 在数据库中保存文件 blob。
6. 从数据库中读取文件 blob。
7. 使用 URL.createObjectURL() 函数创建 URL
8. 在 image 标签的 src 属性中插入 url。

查看更多:https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/