indexedDB存图片减少请求
程序员文章站
2022-05-30 10:14:01
...
getImageFile()获取网络图片
showImage()加载本地indexedDB图片
showImage()加载本地indexedDB图片
<html >
<head><meta charset="UTF-8"></head>
<body onload="showImage()">
<pre>
通过chrome://indexeddb-internals/# 查看indexdb的存储路径，可以手动删除做测试
基本内容：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
例子：
https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
http://robnyman.github.io/html5demos/indexeddb/
</pre>
<input type="button" value="load picture" onclick="getImageFile()"/>
<input type="button" value="show picture" onclick="showImage()"/>
<figure>
<img id="elephant" alt="A close up of an elephant">
<figcaption>A mighty big elephant, and mighty close too!</figcaption>
</figure>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
dbVersion = 1.0;
function getImageFile(){
var request = indexedDB.open("elephantFiles", dbVersion),
db,
createObjectStore = function (dataBase) {
console.log("Creating objectStore")
dataBase.createObjectStore("elephants");
},
putElephantInDb = function(blob){
console.log("Putting elephants in IndexedDB");
// Open a transaction to the database
var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
var transaction = db.transaction(["elephants"], readWriteMode);
// Put the blob into the dabase
var put = transaction.objectStore("elephants").put(blob, "image");
};
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");
};
// 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();
}
// For future use. Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
createObjectStore(event.target.result);
};
}
function showImage() {
// Create/open database
var request = indexedDB.open("elephantFiles", dbVersion),
db,
showImage = function (){
console.log("showImage elephants in IndexedDB");
// Open a transaction to the database
var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
var transaction = db.transaction(["elephants"], readWriteMode);
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
imgElephant.onload = function() {
console.log("imgURL:"+imgURL)
console.log("this.src:"+this.src)
window.URL.revokeObjectURL(this.src);
}
};
};
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 () {
showImage();
};
}else {
showImage();
}
}else {
showImage();
}
}
// For future use. Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
//createObjectStore(event.target.result);
};
}
</script>
</body>
</html>