关于使用HTML5本地存储图片的介绍——和派孔明

最新推荐文章于 2023-05-11 17:21:11 发布

xyphf_和派孔明

最新推荐文章于 2023-05-11 17:21:11 发布

阅读量4.3k

点赞数 1

分类专栏：常用特效 DOM&BOM操作数据处理 HTML5 Java全栈之路文章标签： html5 函数存储图片

本文链接：https://blog.csdn.net/xyphf/article/details/51828706

版权

DOM&BOM操作同时被 3 个专栏收录

64 篇文章 0 订阅

订阅专栏

数据处理

56 篇文章 1 订阅

订阅专栏

Java全栈之路

55 篇文章 11 订阅

订阅专栏

大家可以把以下代码作为一个js文件保存，命名为ImgStorage.js,链接到页面

<script src="ImgStorage.js" type="text/javascript"></script>

function set(key){//存储
    var img = document.createElement('img');
    //当图片加载完成时触发回调函数
    img.addEventListener("load",function(){
        var imgCanvas = document.createElement('canvas');
        imgContest = imgCanvas.getContext('2d');
        //确保canvas元素的大小和图片尺寸一致
        imgCanvas.width = this.width;
        imgCanvas.height = this.height;

        //渲染图片到canvas中
        imgContest.drawImage(this,0,0,this.width,this.height);

        //用data url的形式取出
        var imgAsDataURL = imgCanvas.toDataURL("image/png");

        //保存到本地存储中
        try{
            localStorage.setItem(key,imgAsDataURL);
        }
        catch(e){
            console.log("Storage failed" + e);
        }
    },false);
    img.src = src;
}

function get(div,key){//读取get(容器,图片)
    var srcStr = localStorage.getItem(key);
    var imgObj = document.createElement('img');
    imgObj.src = srcStr;
    div.appendChild(imgObj);
}

使用场景介绍：

图片不怎么更改，希望用户第二次访问时，能够马上看到

注意事项：

1.如果图片比较大的话，将会占用很多的localStorage的资源；
2.如果图片和你请求的域名不再同一个域名下,canvas会报一个安全策略的问题,这个时候你需要给你的服务器加一个access Origin等于所有，这使你的图片实现跨域问题,去被canvas使用

使用方法：

<script type="text/javascript">
        var src = "aaa.png"//引入图片链接
</script>

<script>
window.onload = function(){
    set('imgtest');//存储图片
    var Ipt = document.getElementById('input1');
    var oDiv = document.getElementById('div1');//图片容器
    Ipt.onclick = function(){
        get(oDiv,'imgtest');//获取图片
    }
}
</script>

demo案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="ImgStorage.js" type="text/javascript"></script>

<script type="text/javascript">
        var src = "aaa.png"//引入图片链接
</script>

<script>
window.onload = function(){
    set('imgtest');
    var Ipt = document.getElementById('input1');
    var oDiv = document.getElementById('div1');
    Ipt.onclick = function(){
        get(oDiv,'imgtest');
    }
}   
</script>
</head>
<body>
    <input id="input1" type="button" value="图片显示">
    <div id="div1"></div>
</body>
</html>