（原創）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