大家可以把以下代码作为一个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>