使用HTML5 IndexDB存储图像和文件

使用IndexedDB存储图像和文件

有一天,我们写了关于如何在localStorage中保存图像和文件的文章,它是关于我们今天可用的实用主义。 然而,localStorage有一些性能影响 - 我们将在稍后的博客中讨论这个问题 - 并且未来期望的方法是使用IndexedDB。 在这里,我将向您介绍如何在IndexedDB中存储图像和文件,然后通过ObjectURL呈现它们。

本文是翻译过来的,原文在这里Storing images and files in IndexedDB

关于作者: Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

使用IndexedDB存储图像和文件的常规步骤

首先,我们来谈谈我们将创建一个IndexedDB数据库,将文件保存到其中然后将其读出并显示在页面中的步骤:

  • 1、创建或打开数据库
  • 2、创建一个objectStore
  • 3、将图像文件检索为blob
  • 4、初始化一个数据库事物
  • 5、保存图像blob到数据库中去
  • 6、读出保存的文件并从中创建ObjectURL并将其设置为页面中图像元素的src

1、创建或打开数据库。


// IndexedDB
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,dbVersion = 1;/* Note: The recommended way to do this is assigning it to window.indexedDB,to avoid potential issues in the global scope when web browsers start removing prefixes in their implementations.You can assign it to a varible, like var indexedDB… but then you have to make sure that the code is contained within a function.
*/// Create/open database
var request = indexedDB.open("elephantFiles", dbVersion);request.onsuccess = function (event) {console.log("Success creating/accessing IndexedDB database");db = request.result;db.onerror = function (event) {console.log("Error creating/accessing IndexedDB database");};// Interim solution for Google Chrome to create an objectStore. Will be deprecatedif (db.setVersion) {if (db.version != dbVersion) {var setVersion = db.setVersion(dbVersion);setVersion.onsuccess = function () {createObjectStore(db);getImageFile();};}else {getImageFile();}}else {getImageFile();}
}// For future use. Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {createObjectStore(event.target.result);
};

使用它的预期方法是在创建数据库时触发onupgradeneeded事件或获取更高版本号。 目前仅在Firefox中支持此功能,但很快将在其他Web浏览器中支持。 如果Web浏览器不支持此事件,则可以使用已弃用的setVersion方法并连接到其onsuccess事件。

2、创建一个objectStore(如果它尚不存在)

// Create an objectStore
console.log("Creating objectStore")
dataBase.createObjectStore("elephants");

在这里,您创建一个ObjectStore,您将存储数据 - 或者在我们的例子中,文件 - 并且一旦创建,您不需要重新创建它,只需更新其内容即可。

3、将图像文件检索为blob

// Create XHR
var xhr = new XMLHttpRequest(),blob;xhr.open("GET", "elephant.png", true);
// Set the responseType to blob
xhr.responseType = "blob";xhr.addEventListener("load", function () {if (xhr.status === 200) {console.log("Image retrieved");// File as responseblob = xhr.response;// Put the received blob into IndexedDBputElephantInDb(blob);}
}, false);
// Send XHR
xhr.send();

此代码直接将文件的内容作为blob获取。目前只支持Firefox。 收到整个文件后,将blob发送到函数以将其存储在数据库中。

4、初始化一个数据库事物


// Open a transaction to the database
var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);

要开始向数据库写入内容,您需要使用objectStore名称和要执行的操作类型(在本例中为read和write)启动事务。

5、保存图像blob到数据库中去

// Put the blob into the dabase
transaction.objectStore("elephants").put(blob, "image");

一旦事务到位,您将获得对所需objectStore的引用,然后将您的blob放入其中并为其提供密钥。

6、读出保存的文件并从中创建ObjectURL并将其设置为页面中图像元素的src

// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {var imgFile = event.target.result;console.log("Got elephant!"   imgFile);// Get window.URL objectvar URL = window.URL || window.webkitURL;// Create and revoke ObjectURLvar imgURL = URL.createObjectURL(imgFile);// Set img src to ObjectURLvar imgElephant = document.getElementById("elephant");imgElephant.setAttribute("src", imgURL);// Revoking ObjectURLURL.revokeObjectURL(imgURL);
};

使用相同的事务来获取刚刚存储的图像文件,然后创建一个objectURL并将其设置为页面中图像的src。 例如,这也可以是一个附加到脚本元素的JavaScript文件,然后它将解析JavaScript。

最后完整代码

(function () {// IndexedDBvar indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,dbVersion = 1.0;// Create/open databasevar request = indexedDB.open("elephantFiles", dbVersion),db,createObjectStore = function (dataBase) {// Create an objectStoreconsole.log("Creating objectStore")dataBase.createObjectStore("elephants");},getImageFile = function () {// Create XHRvar xhr = new XMLHttpRequest(),blob;xhr.open("GET", "elephant.png", true);// Set the responseType to blobxhr.responseType = "blob";xhr.addEventListener("load", function () {if (xhr.status === 200) {console.log("Image retrieved");// Blob as responseblob = xhr.response;console.log("Blob:"   blob);// Put the received blob into IndexedDBputElephantInDb(blob);}}, false);// Send XHRxhr.send();},putElephantInDb = function (blob) {console.log("Putting elephants in IndexedDB");// Open a transaction to the databasevar transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);// Put the blob into the dabasevar put = transaction.objectStore("elephants").put(blob, "image");// Retrieve the file that was just storedtransaction.objectStore("elephants").get("image").onsuccess = function (event) {var imgFile = event.target.result;console.log("Got elephant!"   imgFile);// Get window.URL objectvar URL = window.URL || window.webkitURL;// Create and revoke ObjectURLvar imgURL = URL.createObjectURL(imgFile);// Set img src to ObjectURLvar imgElephant = document.getElementById("elephant");imgElephant.setAttribute("src", imgURL);// Revoking ObjectURLURL.revokeObjectURL(imgURL);};};request.onerror = function (event) {console.log("Error creating/accessing IndexedDB database");};request.onsuccess = function (event) {console.log("Success creating/accessing IndexedDB database");db = request.result;db.onerror = function (event) {console.log("Error creating/accessing IndexedDB database");};// Interim solution for Google Chrome to create an objectStore. Will be deprecatedif (db.setVersion) {if (db.version != dbVersion) {var setVersion = db.setVersion(dbVersion);setVersion.onsuccess = function () {createObjectStore(db);getImageFile();};}else {getImageFile();}}else {getImageFile();}}// For future use. Currently only in latest Firefox versionsrequest.onupgradeneeded = function (event) {createObjectStore(event.target.result);};
})();

浏览器支持

  • URL API支持性

image

  • indexDb

image

Github源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gitlab 项目上传

一,登陆gitab,新建reject Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限(公开共享,私有或指定合作者) Initialize this repository with a README: 添加一个README.md gitig…

Java Servlet的前100个问题

1)是“ servlets”目录还是“ servlet”目录? 回答: 对于Java Web Server: 在文件系统上,它是“ servlet” c:\ JavaWebServer1.1 \ servlets \ DateServlet.class 在URL路径中,它是“ servl…

stm32f103r6最小系统原理图_超强PCB布线设计经验谈附原理图

在当今激烈竞争的电池供电市场中,由于成本指标限制,设计人员常常使用双面板。尽管多层板(4层、6层及8层)方案在尺寸、噪声和性能方面具有明显 优势,成本压力却促使工程师们重新考虑其布线策略,采用双面板。在本文中,我…

[UE4GamePlay架构(九)GameInstance(转)

GameInstance这个类可以跨关卡存在,它不会因为切换关卡或者切换游戏模式而被销毁。然而,GameMode和PlayController就会再切换关卡或者游戏模式时被引擎销毁重置,这样他们里面的状态就不能被保存。比如,你想再下一个关卡中知道上一…

php+原生代码+赋值,js重新赋值原生的方法

js的原生方法被覆盖掉以后,如果你还没让原生方法又从新指向一个新的变量名,那就gg了。所以,关键就是怎么再获取到原生的方法。实现的原理呢就是创建一个新的window对象,然后从新的window对象里面获取原生的方法,来重新…

python基础知识 - Day4

String相关的方法: 1. 字符串格式化 format "hello, %s. %s enough for you" values (cloris,hot) print (format % values) 2. 字符串方法 - find() 可以在一个较长的字符串中查找子字符串。返回子串所在位置的最左端索引。如果没有找到,返回…

灵格斯怎么屏幕取词_电脑包尺寸怎么选?手提的好还是双肩的好?比较推荐哪款电脑包?...

在携带笔记本电脑的时候,一般都会用到电脑包,那么电脑包的尺寸该怎么选呢?为了能更好的装下电脑,电脑包的尺寸必须要比笔记本电脑的尺寸大一些,而不能刚刚好。笔记本的尺寸参数一般是指屏幕尺寸,而整个机身…

JSBridge实战

前言 H5 VS Native 一直是前端技术界争执不下的话题。react、vue等技术栈引领着纯H5开发,rn、week则倡导原生体验。但在项目实战中,经常会选择一个中立的方案:混合开发。大众称呼:Hybrid。 本人目前从事新闻类产品研发&#xff…

单元测试Java Hadoop作业

在我以前的文章中,我展示了如何设置一个完整的基于Maven的项目,以用Java创建Hadoop作业。 当然并没有完成,因为它缺少单元测试部分。 在本文中,我将展示如何将MapReduce单元测试添加到我之前开始的项目中。 对于单元测试&#xff…

【bzoj4008 hnoi2015】 亚瑟王

题目描述 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑。他决定,在脱坑之前,最后再来打一盘亚瑟王。既然是最后一战,就一定要打得漂亮。众所周知,亚瑟王是一个看脸的游戏,技能的发…

python 编码声明位置,python中的编码声明

python中的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它,就这么简单#!/usr/bin/python 相当于写死了 python 路径(是告诉OS执行这个py时,调用 /usr/bin 下的 python 解释器;)#!/usr/bin/e…

vue2.0中的:is和is的区别

此文首发于 https://lijing0906.github.io/ 最近,工作之余在翻阅vue.js的官方文档,在查看到动态组件和解析 DOM 模板时的注意事项的时候,讲到一个特殊的is特性,觉得很有意思,就来写一篇自己理解的总结。 现场 写栗子…

mysql复制模式第二部分-----双主模式

双主配置 我在配置主从服务器时,使用了两台服务器:10.19.34.126和10.19.34.91。 1、首先需要在这两台上搭建单独的mysql服务masterA和masterB。 2、配置数据库masterA,要对每一个数据库服务配置唯一标示,参数名为server-id&#x…

pde中微元分析法的主要思想_初中数学常用的思想方法丨所有题型的考试技巧最全整理,高分必备...

【导语】初中数学虽然是基础数学,但是这并不意味着就没有难度,特别是在素质教育下,从培养学生综合素质能力的角度出发,初中数学越来越重视数学思维的培养,因此在很多数学问题的设置上,都进行了相当难度的调…

解决IntelliJ IDEA控制台乱码问题[包含程序运行时的log4j日志以及tomcat日志乱码]...

一、控制台打印的程序运行时的log4j日志中包含中文乱码 在IDEA安装目录的bin目录下找到名为"idea.exe.vmoptions"的文件: 使用文本编译软件(Notepad等)打开此文件,在文件内容从末尾追加一行设置(-Dfile.encodingUTF-8)&…

如何在Spring 3.x中使用事件

创建松耦合应用程序的概念和技术很多,Event是其中之一。 事件可以消除代码中的许多依赖关系。 有时没有事件,很难实施SRP *。 Java中的Observable接口可以帮助我们实现事件(通过Observer Pattern)。 但是,等等&#x…

php识别地址,实现地址自动识别实例(PHP)

具体问题具体分析!代码实现基于laravel完成。一个laravel完整的功能得具备这些:路由route,Model, View, Controller, 我这里用的有依赖注入服务容器等功能,当然,用到地址,你首先要有地址库。。。下面来看看…

kubernetes cpu限制参数说明

docker CPU限制参数 Option Description --cpus<value> Specify how much of the available CPU resources a container can use. For instance, if the host machine has two CPUs and you set --cpus"1.5", the container is guaranteed at most one and …

工业机器人用铸铁牌号_常用铸铁牌号

常用铸铁的牌号、组织与性能常用铸铁的牌号、组织与性能铸铁中的石墨形态、尺寸以及分布状况对性能影响很大。铸铁中石墨状况主要受铸铁的化学成分及工艺过程的影响。铸铁中石墨形态(片状或球状)在铸造后即形成&#xff1b;也可将白口铸铁通过退火&#xff0c;让其中部分或全部…

浏览器拦截打开新窗口情况总结

在打开一个新窗口时&#xff0c;由于浏览器的安全机制&#xff0c;用户未始终允许的情况下&#xff0c;可能会触发到浏览器拦截&#xff0c;无法正常直接弹出。 网上有很多给出解决方案的只言片语&#xff0c;不够全面&#xff0c;所以针对自己遇到的问题做了详细的情况分析。…