(原创)PouchDB 图片本地存储(web离线应用)
/* * 参数 * db: 已建或未建数据库 * pouchId: 数据库唯一的主键_id * src: 图片img的DOM对象 * bg: 判断是否是背景图 * */ function addTodo(db, pouchId,src,bg) { // 查询数据库中是否有该文档 根据主键pouchId查询 db.get(pouchId).then(function(doc) { return db.put({ // 如有该文档 则更新版本号_rev _id: pouchId, _rev: doc._rev, // 版本号 imgFile:doc.imgFile //图片Blob对象 }); }).then(function(response) { // handle response console.log('查询成功'); // 文档查询成功 console.log(response); // 响应查询文档信息 db.get(pouchId).then(function (doc) { // 查询数据库中该主键_id的文档信息 // handle doc var imgBlob = doc.imgFile // blob图片对象 console.log(imgBlob) // 判断是否存在该图片对象Blob if (imgBlob) { // 传入blob对象 dom对象 showImg(imgBlob, src,bg); } else { getByRequest(db,pouchId, src); } }).catch(function (err) { console.log(err); }); }).catch(function (err) { console.log(err); console.log('查询失败,进行创建') // 文档查询失败 // 新建文档 db.put({ _id: pouchId }).then(function (response) { // handle response console.log('创建成功') }).catch(function (err) { console.log(err); }); }); } // 传入blob对象 显示图片 function showImg(imgFile, src,bg) { console.log("showImg" + imgFile); // Get window.URL object var URL = window.URL || window.webkitURL; // Create and revoke ObjectURL // 利用blob对象 创建一个URL对象 var imgURL = URL.createObjectURL(imgFile); // Set img src to ObjectURL // 获取图片的dom对象 并将URL设置为该对象的SRC var imgElephant = document.getElementById(src); if(!bg){ imgElephant.setAttribute("src", imgURL); }else{ imgElephant.style.background = "url("+imgURL+")"; } // Revoking ObjectURL // 当图片加载完成后 // 使用URL.revokeObjectURL() 方法释放之前创建的URL对象 imgElephant.onload = function () { window.URL.revokeObjectURL(this.src); } } // 当数据库查询主键 无该图片数据时 通过项目自身存储图片blob function getByRequest(db,pouchId, src) { // Create XHR var xhr = new XMLHttpRequest(), // 创建 XMLHttpRequest 对象 目前请求项目自身 blob; xhr.open("GET", pouchId, true); // 在项目中get请求该图片 // Set the responseType to blob // 将响应类型设为blob类型 xhr.responseType = "blob"; // 响应加载 xhr.addEventListener("load", function () { // 响应为200 请求完成 if (xhr.status === 200) { console.log("Image retrieved"); // Blob as response blob = xhr.response; // blob对象为响应后的对象 console.log("Blob:" + blob); // 获得blob图片信息 存入pouchDB文档 save(db,blob, pouchId); // 从pouchDB查询该文档 showImg(blob, src); } }, false); // Send XHR xhr.send(); } //根据blob对象为keyPath 更新键值 function save(db,blob, pouchId) { // 根据主键_id 查询文档 并追加文档imgFile内容 更新版本号_rev db.get(pouchId).then(function(doc) { return db.put({ _id: pouchId, _rev: doc._rev, imgFile: blob }); }).then(function(response) { // handle response console.log('图片存储成功') console.log(response) }).catch(function (err) { console.log(err); }); } GitHub地址:https://github.com/VIVI863628/PouchDB/blob/master/IMGDB2.js