Canvas实现保存图片到本地的示例代码

一、简介 需求: 将HTML5的内容保存为图片 思路: 通过Canvas绘图生成base64图片,长按即可保存到本地 问题: canvas禁止跨域、安卓微信长按不能保存base64图片、服务器拉取的图片被压缩 二、具体问题 问题1:canvas是禁止跨域的,如果图像来自其他域,调用toDataURL()会抛出一个错误 解决:标签通过引入 crossorigin 属性能解决跨域, 即crossOrigin="Anonymous" 或 crossOrigin="*" 请注意手q环境下设置 ‘Anonymous’不支持,需要设置为 '*',如果使用 crossorigin="anonymous",则相当于匿名 CORS 问题2:设置了”crossOrigin”的标签不能拉下跨域的图片,无法触发img.onload 解决: 后台转发或nigix代理,设置Access-Control-Allow-Origin:“wx.qlogo.cn”,允许静态资源服务器图片跨域这种设置 解决获取图片跨域的问题。(此处图片为用户头像域名wx.qlogo.cn,存在跨域问题) 问题3:安卓手机微信h5长按不能保存base64图片 解决:将canvas绘制的base64图片上传到服务器上,再从服务器上获取到png(jpg)图片。这种做法较麻烦,后面还需要找方法改进。 问题4:上传到服务器的图片压缩严重 解决:上传的图片会在服务器有几个资源,压缩度不一,从目录 'http://img10.360buyimg.com/promotepic/' 可拿到像素较清晰的图片。 问题5:绘制的二维码链接(//wqs.jd.com/xxx)长按不能直接进入页面 解决:指定要绘制的二维码链接一定要加上http: 否则二维码将识别为文字 //canvas绘制部分代码: var picurl = "http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0"; var img = new Image,canvas = document.createElement("canvas"),ctx = canvas.getContext("2d"),//后台nigix代理 参见问题2 src = picurl.replace("http://wx.qlogo.cn","//wq.jd.com"); //解决 canvas 跨域 toDataURL不能读取问题 参见问题1 img.crossOrigin = "Anonymous"; //图片资源的预加载 img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage( img,0 ); //将画好的base64图片 localStorage.setItem( "savedImageData",canvas.toDataURL("image/png") ); } img.src = src;

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法