本篇文章为大家展示了怎么在HTML5中使用IndexDB存储图像，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
1、创建或打开数据库。
// IndexedDBwindow.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, dbVersion = 1;// Create/open databasevar 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 deprecated if (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);};使用它的预期方法是在创建数据库时触发onupgradeneeded事件或获取更高版本号。 目前仅在Firefox中支持此功能，但很快将在其他Web浏览器中支持。 如果Web浏览器不支持此事件，则可以使用已弃用的setVersion方法并连接到其onsuccess事件。
2、创建一个objectStore（如果它尚不存在）
// Create an objectStoreconsole.log("Creating objectStore")dataBase.createObjectStore("elephants");在这里，您创建一个ObjectStore，您将存储数据 - 或者在我们的例子中，文件 - 并且一旦创建，您不需要重新创建它，只需更新其内容即可。
3、将图像文件检索为blob
// 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"); // File as response blob = xhr.response; // Put the received blob into IndexedDB putElephantInDb(blob); }}, false);// Send XHRxhr.send();此代码直接将文件的内容作为blob获取。目前只支持Firefox。 收到整个文件后，将blob发送到函数以将其存储在数据库中。
4、初始化一个数据库事物
// Open a transaction to the databasevar transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);要开始向数据库写入内容，您需要使用objectStore名称和要执行的操作类型（在本例中为read和write）启动事务。
5、保存图像blob到数据库中去
// Put the blob into the dabasetransaction.objectStore("elephants").put(blob, "image");一旦事务到位，您将获得对所需objectStore的引用，然后将您的blob放入其中并为其提供密钥。
6、读出保存的文件并从中创建ObjectURL并将其设置为页面中图像元素的src
// 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 object var URL = window.URL || window.webkitURL; // Create and revoke ObjectURL var imgURL = URL.createObjectURL(imgFile); // Set img src to ObjectURL var imgElephant = document.getElementById("elephant"); imgElephant.setAttribute("src", imgURL); // Revoking ObjectURL URL.revokeObjectURL(imgURL);};使用相同的事务来获取刚刚存储的图像文件，然后创建一个objectURL并将其设置为页面中图像的src。 例如，这也可以是一个附加到脚本元素的JavaScript文件，然后它将解析JavaScript。
最后完整代码
(function () { // IndexedDB var 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 database var request = indexedDB.open("elephantFiles", dbVersion), db, createObjectStore = function (dataBase) { // Create an objectStore console.log("Creating objectStore") dataBase.createObjectStore("elephants"); }, getImageFile = function () { // 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"); // Blob as response blob = xhr.response; console.log("Blob:" + blob); // Put the received blob into IndexedDB putElephantInDb(blob); } }, false); // Send XHR xhr.send(); }, putElephantInDb = function (blob) { console.log("Putting elephants in IndexedDB"); // Open a transaction to the database var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE); // Put the blob into the dabase var put = transaction.objectStore("elephants").put(blob, "image"); // 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 object var URL = window.URL || window.webkitURL; // Create and revoke ObjectURL var imgURL = URL.createObjectURL(imgFile); // Set img src to ObjectURL var imgElephant = document.getElementById("elephant"); imgElephant.setAttribute("src", imgURL); // Revoking ObjectURL URL.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 deprecated if (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); };})();上述内容就是怎么在HTML5中使用IndexDB存储图像，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网行业资讯频道。
