/*
*参数
* db:已建或未建数据库
* pouchId:数据库唯一的主键_id
* src： 图片img的DOM对象
* bg： 判断是否是背景图
* */
varaddTodo=function(db,ary) {
ary.forEach(function(e) {
console.log(e)
//查询数据库中是否有该文档 根据主键pouchId查询
db.get(e.pouchId).then(function(doc) {//查询数据库中该主键_id的文档信息
// handle doc
varimgBlob=doc.imgFile// blob图片对象
console.log(imgBlob)
//判断是否存在该图片对象Blob
if(imgBlob) {
//传入blob对象dom对象
showImg(imgBlob,e.src,e.bg);
}else{
getByRequest(db,e.pouchId,e.src);
}
}).catch(function(err) {
console.log(err);
console.log('查询失败，进行创建')//文档查询失败
//新建文档
db.put({
_id:e.pouchId
}).then(function(response) {
// handle response
console.log('创建成功')
}).catch(function(err) {
console.log(err);
});
});
})
}
//传入blob对象 显示图片
functionshowImg(imgFile,src,bg) {
console.log("showImg"+imgFile);
// Get window.URL object
varURL=window.URL||window.webkitURL;
// Create and revoke ObjectURL
//利用blob对象 创建一个URL对象
varimgURL=URL.createObjectURL(imgFile);
// Set img src to ObjectURL
//获取图片的dom对象 并将URL设置为该对象的SRC
varimgElephant=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
functiongetByRequest(db,pouchId,src) {
// Create XHR
varxhr=newXMLHttpRequest(),//创建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更新键值
functionsave(db,blob,pouchId) {
//根据主键_id查询文档 并追加文档imgFile内容 更新版本号_rev
db.get(pouchId).then(function(doc) {
returndb.put({
_id:pouchId,
_rev:doc._rev,
imgFile:blob
});
}).then(function(response) {
// handle response
console.log('图片存储成功')
console.log(response)
}).catch(function(err) {
console.log(err);
});
}
module.exports=addTodo;
