使用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. 在图片代码中的src属性中插入网址。

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

Answer 2

是的，这是可能的。在@Yauhen的答案中，link to a Mozilla article可以解释一种可能的实现方式。我将使用canvas提供一些额外的上下文和替代解决方案。

indexedDB是一个索引键/值存储，可以存储任何类型的JavaScript对象，可以称为＆＃34; cloned。＆＃34;一个方便的启发式实际上是你可以传递给Web Worker的任何东西，你可以传递给IDB。

要存储图像，请将它们转换为字符串。可以克隆字符串，因此它们可以saveToDB()和readFromDB()无问题。

将图像转换为字符串表示形式的一种方法是createObjectURL()，您可以在URL对象上执行此操作。我首选的方法是toDataURL() which are found on canvas无论哪种方式，您都要查看中间步骤1）将图像加载到blob或画布然后2）将数据提取到可存储的字符串中。< / p>