使用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>  

- Vishnu G S

---

这里有一个非常有用的代码沙盒：https://codepen.io/MSEdgeDev/pen/YqqOLd - James Bond

Answer 1

总体思路是：

1. 创建一个指定名称的数据库。使用indexedDB.open()函数实现。
2. 创建一个objectStore对象。
3. 读取文件（在这种情况下是图片），将其作为二进制大对象(blob)。使用XMLHttpRequest函数实现。
4. 创建一个数据库事务。
5. 将文件blob保存到数据库中。
6. 从数据库中读取文件blob。
7. 使用URL.createObjectURL()函数创建URL。
8. 将URL插入到image标签的src属性中。

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

- Yauhen Vasileusky

Answer 2

是的，这是可能的。在 @Yauhen 的答案中有一个 链接到 Mozilla 文章，可以解释一种可能的实现方式。我将提供一些额外的背景信息和使用 canvas 的另一种解决方案。 indexedDB 是一个索引键/值存储，可以存储任何类型的 JavaScript 对象，可以被所谓的 "克隆"。一个方便的启发式规则是，基本上你可以传递给 Web Worker 的任何东西都可以传递给 IDB。

要存储图像，您需要将它们转换为字符串。字符串可以被克隆，所以它们可以无问题地进行 saveToDB() 和 readFromDB()。

一种将图像转换为字符串表示的方法是使用 createObjectURL()，它可以在 URL 对象上执行。我更喜欢的方法是使用 toDataURL() 这些方法可以在 canvas 上找到 无论哪种方法，您都需要进行中间步骤来：

1. 将图像加载到 blob 或 canvas 中，然后
2. 将该数据提取为可存储的字符串。

- buley

---

你为什么更喜欢使用 canvas 的 toDataUrl() 方法？ - Myers Carpenter