使用IndexedDB保存图像 [英] Using IndexedDB to save images

问题描述

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

单击按钮后，希望将具有indexedDB的图像保存在名为图像"的数据库中.

Would like to save image with indexedDB in database named Images on button click.

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

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

Another button will read image from Images database to display in <div id="resultContent"/>.

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

推荐答案

总体思路是:

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/

这篇关于使用IndexedDB保存图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！