本文主要是介绍indexDB的使用和异步图片blob文件保存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
//调整webkit兼容性
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
dbVersion = 1.0;
var cn,db;
//打开数据库
//第一个参数是数据库名（打开即创建，没有其它独立的创建方法）
//其它参数以后解释
var cn=indexedDB.open( "item" );
//数据库初始化事件
cn.onupgradeneeded= function (e){
//获取数据库对象
db=e.target.result;
//创建数据库实例
//第一个是存储对象名，类似关系数据库的表名
//第二个参数是主键名，还有其他选项，可以设置自增的
var o=db.createObjectStore(
"PicData" ,{keyPath: "id" }
);
};
//数据库打开成功事件
cn.onsuccess= function (e){
//获取数据库对象
//因为上面的初始化事件未必会被调用到，这里当然也得获取一次
db=e.target.result;
//这个doTransaction的参数是一个回调函数，可以把这个回调函数当作事物的过程使用
db.doTransaction= function (f){
//从事务对象闪使用objectStore访问具体的存储对象，并把结果传给回调函数
f(db.transaction( "PicData" , "readwrite" ).objectStore( "PicData" ));
};
};
// 将图片缓存的本地
function fetchImage(id, type) {
var src = ""
var imageId = id;
if (type == "small" ) {
src = "../item/common/simpleImage.do?picId=" +id;
} else {
src = "../item/common/simpleImage.do?type=b&picId=" +id;
imageId = (id+ "blimg" );
}
var elephant = document.getElementById(id);
elephant.src = "../item/img/loading.gif" ;
try {
var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
var transaction = db.transaction([ "PicData" ], readWriteMode);
var objectStore = transaction.objectStore( "PicData" );
var request = objectStore.get(imageId);
request.onsuccess = function (event) {
var data = event.target.result;
if (data == null ) {
// Create XHR
var xhr = new XMLHttpRequest(),
blob;
xhr.open( "GET" , src, true );
// Set the responseType to blob
xhr.responseType = "blob" ;
xhr.addEventListener( "load" , function () {
if (xhr.status === 200) {
// Blob as response
blob = xhr.response;
var imgFile = blob;
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(imgFile);
// Set img src to ObjectURL
elephant.setAttribute( "src" , imgURL);
// Revoking ObjectURL
elephant.onload = function () {
window.URL.revokeObjectURL( this .src);
}
// Save data in indexDB
var picData = {};
picData.id = imageId;
picData.blob = blob;
saveInIndexDB(picData);
}
}, false );
// Send XHR
xhr.send();
} else {
console.log( "Got image !" );
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(request.result.blob);
// Set img src to ObjectURL
Imagess(imgURL,id);
//elephant.setAttribute("src", imgURL);
// Revoking ObjectURL
elephant.onload = function () {
window.URL.revokeObjectURL( this .src);
}
}
}
} catch (e) {
Imagess(src, id);
}
}
function saveInIndexDB(picData) {
//调用我们自己添加的方法来处理一个事务
db.doTransaction( function (e){
e.add(picData);
});
}
//判断是否加载完成
function Imagess(url,imgid){
var img= new Image();
img.src = url;
//判断浏览器
var Browser= new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie= /msie/ .test(Browser.userAgent);
Browser.Moz= /gecko/ .test(Browser.userAgent);
if (Browser.ie){
img.onreadystatechange = function (){
if (img.readyState== "complete" ||img.readyState== "loaded" ){
document.getElementById(imgid).src=img.src;
}
}
} else if (Browser.Moz){
img.οnlοad= function (){
if (img.complete== true ){
document.getElementById(imgid).src=img.src;
}
}
}
}
// 缓存数据
function getItemPicId (currentPage) {
$.ajax({
type: "post" ,
url: "../item/common/cacheItemPic.do" ,
data:{ "currentPage" :currentPage},
dataType: "json" ,
error: function (){
},
success: function (data){
cacheItemPic(data.rows);
total = data.total;
}
});
}
// 保存到本地
function cacheItemPic(data) {
for ( var i=0; i < data.length; i++) {
var src = ""
var imageId = data[i].ST_PIC_ID;
if (data[i].NM_SORT == "1" ) {
src = "../item/common/simpleImage.do?picId=" +imageId;
cacheImg (imageId, src);
}
src = "../item/common/simpleImage.do?type=b&picId=" +imageId;
imageId = (imageId+ "blimg" );
cacheImg (imageId, src);
}
function cacheImg (imgId, imgSrc) {
try {
var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
var transaction = db.transaction([ "PicData" ], readWriteMode);
var objectStore = transaction.objectStore( "PicData" );
var request = objectStore.get(imgId);
request.onsuccess = function (event) {
var data = event.target.result;
if (data == null ) {
// Create XHR
var xhr = new XMLHttpRequest(),
blob;
xhr.open( "GET" , imgSrc, true );
// Set the responseType to blob
xhr.responseType = "blob" ;
xhr.addEventListener( "load" , function () {
if (xhr.status === 200) {
// Blob as response
blob = xhr.response;
var imgFile = blob;
// Save data in indexDB
var picData = {};
picData.id = imgId;
picData.blob = blob;
saveInIndexDB(picData);
}
}, false );
// Send XHR
xhr.send();
} else {
console.log( "Got image !" );
objectStore. delete (imgId);
console.log( "delete data!" );
// Create XHR
var xhr = new XMLHttpRequest(),
blob;
xhr.open( "GET" , imgSrc, true );
// Set the responseType to blob
xhr.responseType = "blob" ;
xhr.addEventListener( "load" , function () {
if (xhr.status === 200) {
// Blob as response
blob = xhr.response;
var imgFile = blob;
// Save data in indexDB
var picData = {};
picData.id = imgId;
picData.blob = blob;
saveInIndexDB(picData);
}
}, false );
// Send XHR
xhr.send();
}
}
} catch (e) {
console.log( "cache image error!" );
}
}
}
这篇关于indexDB的使用和异步图片blob文件保存的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
