从IDB读取图片的案例及最终的效果

从IDB读取图片

/*

cb： 所有图片都尝试获取之后的回调(即使有个别图片获取不成功)。

cb_error：读取图片失败之后的回调。

*/

var getPhotoSRCs_work = function( cb, cb_error ){

var photoURLs = indexedDB_Config.photoURLs

,transaction

,loadTimes = 0

,table_name = tbName

,SRCs = {};

transaction = db.transaction( [ table_name ], window.IDBTransaction.READ_WRITE );

var tb = transaction.objectStore( table_name );

for( var i = 0; i < photoURLs.length; i++ ){

var photoURL = photoURLs[i];

Utils.request( tb.get( photoURL ) , function( photoURL ){

return function( event ){

loadTimes++;

var blob = event.target.result;

if( blob != null ){

console.log( '從indexedDB 获取 ' + photoURL + ' 图片成功!' );

// 为blob图片生成img标签src属性值

SRCs[ photoURL ] = window.URL.createObjectURL( blob );

if( loadTimes == photoURLs.length ){

cb( SRCs );

}

}else{

cb_error( 'IDB不存在請求的圖片' );

}

};

}( photoURL ), function( photoURL ){

return function(){

var strError = '從indexedDB 获取 ' + photoURL + ' 图片失敗!';

console.log( strError );

cb_error( strError );

loadTimes++;

SRCs[ photoURL ] = null;

if( loadTimes == photoURLs.length ){

cb( SRCs );

}

};

}( photoURL ) );

}

}

在这里，解析一下传入cb回调的变量SRCs，这个变量以图片路径作为key，img标签src值作为value的JSON对象。

如:SRCs = {

img1.jpg: blob:a4009ed8-5d16-4ad9-b480-bc54fc3af638;

img2.jpg: blob:b430fe41-7733-46ef-b9f6-9023356cd743;

}

当然这段代码也是伪代码，在真实的环境下，还是要先打开数据库，在打开成功之后回调getPhotoSRCs_work，但是要显示图片，还要多做一件小事，就是在cb回调函数里通过SRCs变量将图片的src值提取出来，并赋值到对应img对象的src属性值上。

展示一下DEMO：

查看一下，img标签的src属性值

本文来源 我爱IT技术网 http://www.52ij.com/jishu/5092.html 转载请保留链接。