//转载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="haorooms_btn" type="button" value="图片显示">
<div id="haorooms_div"></div>
<script type="text/javascript">
function test(){
window.open('a.html?init=first')
}
function saveImg( key ){
var img = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src='./timg.jpg'
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);
}
window.onload = function(){
if(! localStorage.getItem('savedImageData')){
saveImg("savedImageData");
}
var haoroomsbtn = document.getElementById('haorooms_btn');
var oDiv = document.getElementById('haorooms_div');
haoroomsbtn.onclick = function(){
get(oDiv,"savedImageData");
}
}
</script>
</body>
</html>
利用canvas和localstorage实现本地存储图片
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 什么是“被污染”的Canvas 可以不通过 CORS 就在画布中使用图片，但是会无法使用画布的toBlob()/t...
- animation:动画 动画名称：animation-name:ning; 动画的持续时间：animation-...
- 最近的业务处理上，要使用cookie缓存储一下数据，公司的cookie还搞出点问题。而用户的浏览器都是利用微信的内...
