使用帆布怎么保存图片到本地

　　介绍

本篇文章为大家展示了使用帆布怎么保存图片到本地,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强>一、简介

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

<强>二,具体问题

问题1:帆布是禁止跨域的,如果图像来自其他域,调用toDataURL()会抛出一个错误

使用帆布怎么保存图片到本地

解决:& lt; img>标签通过引入crossorigin属性能解决跨域,即crossorigin=癆nonymous"或crossOrigin=?”,请注意手问环境下设置,而Anonymous&,不支持,需要设置为& # 39;* & # 39;如果使用crossorigin=癮nonymous",则相当于匿名歌珥

问题2:设置了“crossorigin”的& lt; img>标签不能拉下跨域的图片,无法触发img。onload

使用帆布怎么保存图片到本地

解决:后台转发或nigix代理,设置Access-Control-Allow-Origin:“wx.qlogo.cn”,允许静态资源服务器图片跨域这种设置解决获取图片跨域的问题。(此处图片为用户头像域名wx.qlogo.cn,存在跨域问题)

使用帆布怎么保存图片到本地

使用帆布怎么保存图片到本地

问题3:安卓手机微信一直长按不能保存base64图片

解决:将画布绘制的base64图片上传到服务器上,再从服务器上获取到png (jpg)图片。这种做法较麻烦,后面还需要找方法改进。

问题4:上传到服务器的图片压缩严重

解决:上传的图片会在服务器有几个资源,压缩度不一,从目录& # 39;http://img10.360buyimg.com/promotepic/& # 39;可拿到像素较清晰的图片。

问题5:绘制的二维码链接(//wqs.jd.com/xxx)长按不能直接进入页面

解决:指定要绘制的二维码链接一定要加上http:否则二维码将识别为文字

//帆布绘制部分代码: 　　 　　var  picurl =,“http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0"; 　　,,var  img =, new 形象, 　　,,,canvas =, document.createElement (“canvas"), 　　,,,ctx =, canvas.getContext (“2 d"), 　　,,,,,//后台nigix代理,参见问题2 　　,,,,,src =, picurl.replace (“http://wx.qlogo.cn"”//wq.jd.com"); 　　,,,,,//解决,canvas 跨域,toDataURL不能读取问题,参见问题1 　　,,,,,img.crossOrigin =,“Anonymous"; 　　,,,,,//图片资源的预加载 　　,,,,,,img.onload =,()函数,{ 　　,,,,,,,,,,,,canvas.width =, img.width; 　　,,,,,,,,,,,canvas.height =, img.height; 　　,,,,,,,,,,,,ctx.drawImage (, img, 0, 0,); 　　,,,,,,,,,,,//将画好的base64图片 　　,,,,,,,,,,,,localStorage.setItem (,“savedImageData",, canvas.toDataURL(“图像/png"),); 　　,,,,,} 　　,,,,,,img.src =, src;

上传图片部分代码:

//,上传图片,参见问题3 　　. ajax({美元 　　,,,类型:,& # 39;文章# 39; 　　url:,,,,, loadJs.addToken (& # 39; http://wq.jd.com/activetmp/promotepic/promoteaddpic& # 39;,,“j132"), 　　数据:,,,,{ 　　,,,,,,,文件名:,new 日期().getTime () + & # 39; & # 39; + Math.floor (math . random () * 10000), +, & # 39; jpg # 39; 　　,,,,,,,内容:,base64pic, 　　,,,,,,,活跃:,“shotpic20160901" 　　,,,}, 　　,,,数据类型:,& # 39;json # 39; 　　,,,xhrFields:, {, withCredentials: true }, 　　成功,,,:,功能(数据),{ 　　,,,,,,,,,,,,,,,,,,,,,,,,,,if  (picdata.id ==, 1,,,, picdata.msg), { 　　,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,//图片路径,此前缀路径的图片最清晰,参见问题4 　　,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,var  imgPre =, & # 39; http://img10.360buyimg.com/promotepic/& # 39;; 　　,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,//图片地址拼接的完整地址链接 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

使用帆布怎么保存图片到本地