`
haoningabc
  • 浏览: 1489750 次
  • 性别: 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总结帖
评论
发表评论

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

相关推荐

    手机端仿美团商铺详情页面

    - **本地存储**：利用localStorage或IndexedDB缓存用户购物车信息，确保页面刷新后数据不丢失。 - **API接口**：与后台服务器交互，获取商品信息、完成购买操作等，需设计合理的API接口协议。 - **错误处理**：...

    衣服试穿

    8. 数据存储：如果用户试穿记录需要保存，可能需要用到本地存储（如Web Storage或IndexedDB）。 通过分析这个压缩包的内容，开发者可以学习到如何创建一个互动式的虚拟试衣间，以及网页开发中涉及的各种技术细节。...

    stock-tracker-client

    2. **数据管理**：通过本地存储或IndexedDB等技术，JavaScript可以保存用户的库存数据，即使在页面刷新后也能保持状态。 3. **实时更新**：通过WebSocket或者轮询（polling）技术，实现库存信息的实时同步，确保...

    H5移动端商城网站模板

    例如，`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;section&gt;`等标签用于组织页面结构，Web Storage和IndexedDB提供本地数据存储，Canvas和SVG用于动态图形和动画。 2. **响应式设计**：H5移动端商城需采用响应式设计，确保在不同...

    lrlz_h5_node:带有 h5 和节点的 lrlz 购物中心

    1. **离线存储**：通过`localStorage`和`IndexedDB`，实现用户数据的本地存储，提高页面加载速度和用户体验。 2. **媒体元素**：利用`&lt;video&gt;`和`&lt;audio&gt;`标签，支持多媒体内容的直接播放，增强购物体验。 3. **...

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