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.onload= 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!");

          }

     }

}