zoukankan      html  css  js  c++  java
  • H5本地离线存储

    前言
    上一篇文件结尾,有同学问我本地存储图片方法,其实本地存储方式有很多,我们打开谷歌浏览器,查看源代码,在resources页签中,有web SQl ,indexedDB等等,我前面文章讲过Localstorage本地存储,我今天简单用Localstorage,简单的写一下存储图片的方法!

    思路
    我们知道Localstorage只能存储字符串,那么我们可以把图片转换为base64编码的字符串,不就可以存储了吗?

    图片编码的数据一般以如下开头

    data:image/gif;base64,base64编码的gif图片数据
    data:image/png;base64,base64编码的png图片数据
    data:image/jpeg;base64,base64编码的jpeg图片数据
    data:image/x-icon;base64,base64编码的icon图片数据
    关键是如何转换呢?

    我们canvas中有个toDataURL()方法,貌似可以转换!拿我们就用这个方法试一试!

    存储图片函数书写
    function saveImg( key ){
    var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://b.hiphotos.baidu.com/baike/w%3D268%3Bg%3D0/sign=92e00c9b8f5494ee8722081f15ce87c3/29381f30e924b899c83ff41c6d061d950a7bf697.jpg"; // insert image url here

    img.crossOrigin = "Anonymous";

    img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( key, canvas.toDataURL("image/png") );
    }
    img.src = src;
    // make sure the load event fires for cached images too
    if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
    }
    }
    获取图片函数书写
    function get(div,key){//读取get(容器,图片)
    var srcStr = localStorage.getItem(key);
    var imgObj = document.createElement('img');
    imgObj.src = srcStr;
    div.appendChild(imgObj);
    }
    应用
    <input id="haorooms_btn" type="button" value="图片显示">
    <div id="haorooms_div"></div>

    window.onload = function(){
    saveImg("savedImageData");
    var haoroomsbtn = document.getElementById('haorooms_btn');
    var oDiv = document.getElementById('haorooms_div');
    haoroomsbtn.onclick = function(){
    get(oDiv,"savedImageData");
    }
    }

  • 相关阅读:
    【题解】Killer Names($O(nlog n)$做法)
    【瞎讲】类欧几里得入土教程
    【题解】SDOI2010所驼门王的宝藏(强连通分量+优化建图)
    【题解】ARC101F Robots and Exits(DP转格路+树状数组优化DP)
    【题解】LOJ6060 Set(线性基)
    【题解】CF1056F Write the Contest(三分+贪心+DP)
    【题解】多少个$1$(exBSGS)
    【题解】幼儿园篮球题(范德蒙德卷积+斯特林+NTT)
    【题解】P1373 小a和uim之大逃离
    【题解】地精部落(DP)
  • 原文地址:https://www.cnblogs.com/qiaoxinming/p/6561322.html
Copyright © 2011-2022 走看看