`
haoningabc
  • 浏览: 1449298 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

indexedDB存图片减少请求

indexdbjavascript 
阅读更多
getImageFile()获取网络图片

showImage()加载本地indexedDB图片 
<html >
<head><meta charset="UTF-8"></head>
<body onload="showImage()">
<pre>
通过chrome://indexeddb-internals/# 查看indexdb的存储路径，可以手动删除做测试

基本内容：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html 
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
例子：
https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/ 
http://robnyman.github.io/html5demos/indexeddb/

</pre>
<input type="button" value="load picture" onclick="getImageFile()"/>
<input type="button" value="show picture" onclick="showImage()"/>
<figure>
 <img id="elephant" alt="A close up of an elephant">
 <figcaption>A mighty big elephant, and mighty close too!</figcaption>
</figure>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
    IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
    dbVersion = 1.0;
function getImageFile(){
    var request = indexedDB.open("elephantFiles", dbVersion),
        db,
        createObjectStore = function (dataBase) {
            console.log("Creating objectStore")
            dataBase.createObjectStore("elephants");
        },
        putElephantInDb = function(blob){
            console.log("Putting elephants in IndexedDB");
            // Open a transaction to the database
            var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
            var transaction = db.transaction(["elephants"], readWriteMode);

            // Put the blob into the dabase
            var put = transaction.objectStore("elephants").put(blob, "image");
        };
        request.onerror = function (event) {
            console.log("Error creating/accessing IndexedDB database");
        };
        request.onsuccess = function (event) {
            console.log("Success creating/accessing IndexedDB database");
            db = request.result;
            db.onerror = function (event) {
                console.log("Error creating/accessing IndexedDB database");
            };
             // Create XHR
            var xhr = new XMLHttpRequest(),
                blob;
            xhr.open("GET", "elephant.png", true);
            // Set the responseType to blob
            xhr.responseType = "blob";
            xhr.addEventListener("load", function () {
                if (xhr.status === 200) {
                    console.log("Image retrieved");               
                    // Blob as response
                    blob = xhr.response;
                    console.log("Blob:" + blob);
                    // Put the received blob into IndexedDB
                    putElephantInDb(blob);
                }
            }, false);
            // Send XHR
            xhr.send();
        }
        // For future use. Currently only in latest Firefox versions
        request.onupgradeneeded = function (event) {
            createObjectStore(event.target.result);
        };
}

function showImage() {
    // Create/open database
    var request = indexedDB.open("elephantFiles", dbVersion),
        db,
        showImage = function (){
            console.log("showImage elephants in IndexedDB");
            // Open a transaction to the database
            var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
            var transaction = db.transaction(["elephants"], readWriteMode);
            transaction.objectStore("elephants").get("image").onsuccess = function (event) {
                var imgFile = event.target.result;
                console.log("Got elephant!" + imgFile);
                // Get window.URL object
                var URL = window.URL || window.webkitURL;
                // Create and revoke ObjectURL
                var imgURL = URL.createObjectURL(imgFile);
                // Set img src to ObjectURL
                var imgElephant = document.getElementById("elephant");
                imgElephant.setAttribute("src", imgURL);
                // Revoking ObjectURL
                imgElephant.onload = function() {
                    console.log("imgURL:"+imgURL)
                    console.log("this.src:"+this.src)
                    window.URL.revokeObjectURL(this.src);
                }
            };
        };
    request.onerror = function (event) {
        console.log("Error creating/accessing IndexedDB database");
    };
    request.onsuccess = function (event) {
        console.log("Success creating/accessing IndexedDB database");
        db = request.result;
        db.onerror = function (event) {
            console.log("Error creating/accessing IndexedDB database");
        };      
        // Interim solution for Google Chrome to create an objectStore. Will be deprecated
        if (db.setVersion) {
            if (db.version != dbVersion) {
                var setVersion = db.setVersion(dbVersion);
                setVersion.onsuccess = function () {
                    showImage();
                };
            }else {
                showImage();
            }
        }else {
            showImage();
        }
    }
    // For future use. Currently only in latest Firefox versions
    request.onupgradeneeded = function (event) {
        //createObjectStore(event.target.result);
    };
}
</script> 
</body>
</html>
分享到：
| srt学习笔记零：srt总结帖
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics