使用IndexedDB保存图像

本文介绍了使用IndexedDB保存图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 <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>

推荐答案

总体思路是:

创建具有指定名称的数据库.为此，使用indexedDB.open().

创建一个objectStore.

以blob格式读取文件(您的情况下为图片).为此使用XMLHttpRequest.

创建数据库事务.

将文件Blob保存在数据库中.

从数据库读取文件blob.

使用URL.createObjectURL()函数创建URL

在图像标签的src属性中插入网址.

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