indexDB的使用和异步图片blob文件保存

2024-06-19 21:58

本文主要是介绍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文件保存的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076256

相关文章

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR(光学

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

Linux使用dd命令来复制和转换数据的操作方法

《Linux使用dd命令来复制和转换数据的操作方法》Linux中的dd命令是一个功能强大的数据复制和转换实用程序,它以较低级别运行,通常用于创建可启动的USB驱动器、克隆磁盘和生成随机数据等任务,本文... 目录简介功能和能力语法常用选项示例用法基础用法创建可启动www.chinasem.cn的 USB 驱动

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

c# checked和unchecked关键字的使用

《c#checked和unchecked关键字的使用》C#中的checked关键字用于启用整数运算的溢出检查,可以捕获并抛出System.OverflowException异常,而unchecked... 目录在 C# 中,checked 关键字用于启用整数运算的溢出检查。默认情况下,C# 的整数运算不会自

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W