使用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. 在DB中保存文件blob.
6. 从数据库中读取文件blob.
7. 使用URL.createObjectURL()函数创建URL
8. 在图像标记中的src属性中插入url.

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