返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML5本地存储之Web Storage详解

2019-01-28 14:35:09于海丽

 最后的效果图如下：

Web Storage存储图片

前面我们已经提到过，本地存储只支持字符串的存取，那么我们要做的就是将图片转换成 Data URI 。其中一种实现方式就是用canvas元素来加载图片。然后你可以以Data URI的形式从canvas中读取图片。
保存图片的函数如下：

JavaScript Code复制内容到剪贴板
  1. function setImg(key,src){            var img = document.createElement('img');   
  2.         //当图片加载完成的时候触发回调函数            img.addEventListener("load",function(){   
  3.             var imgCanvas = document.createElement("canvas"),                imgContext = imgCanvas.getContext("2d");   
  4.         //确保canvas元素大小和图片的尺寸一致            imgCanvas.width = this.width;   
  5.         imgCanvas.height = this.height;            //渲染图片到canvas中   
  6.         imgContext.drawImage(this,0,0,this.width,this.height);      
  7.         //用data url的形式取出            img.crossOrigin = "*"; //防止跨域取照片出错   
  8.         var imgAsDataURL = imgCanvas.toDataURL("image/png");      
  9.         //保存到本地存储中            try{   
  10.             localStorage.setItem(key, imgAsDataURL);            }   
  11.         catch(e){                alert("保存失败！请重试。。。");   
  12.         }      
相关文章 大家在看