Canvas实现保存图片到本地

本文介绍了如何利用HTML5的Canvas元素将绘制的图形转换为图片,并保存到本地,包括关键步骤和技术要点。
摘要由CSDN通过智能技术生成

一、简介

需求: 将HTML5的内容保存为图片
思路: 通过Canvas绘图生成base64图片,长按即可保存到本地
问题: canvas禁止跨域、安卓微信长按不能保存base64图片、服务器拉取的图片被压缩

二、具体问题

问题1:canvas是禁止跨域的,如果图像来自其他域,调用toDataURL()会抛出一个错误
![图一](https://img-blog.csdn.net/20161027142626830)
解决:<img>标签通过引入 crossorigin 属性能解决跨域, 即crossOrigin="Anonymous" 或 crossOrigin="*"  请注意手q环境下设置 ‘Anonymous’不支持,需要设置为 '*',如果使用 crossorigin="anonymous",则相当于匿名 CORS


问题2:设置了”crossOrigin”的<img>标签不能拉下跨域的图片,无法触发img.onload
![这里写图片描述](https://img-blog.csdn.net/20161027142824441) 
解决: 后台转发或nigix代理,设置Access-Control-Allow-Origin:“wx.qlogo.cn”,允许静态资源服务器图片跨域这种设置 解决获取图片跨域的问题。(此处图片为用户头像域名wx.qlogo.cn,存在跨域问题)
![图2](https://img-blog.csdn.net/20161027143119172) 
![图3](https://img-blog.csdn.net/20161027143417911)

问题3:安卓手机微信h5长按不能保存base64图片
解决:将canvas绘制的base64图片上传到
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值