js保存canvas图片到本地,将canvas保存为图片下载
一、简介
要求：将HTML5的内容保存为图片
思路：通过画布绘制生成base64图片，长按保存到本地。
问题：canvas禁止跨域，安卓微信长按无法保存base64图片，服务器拉的图片是压缩的。
二、具体问题
问题1: Canvas禁止跨域。如果图像来自其他域，调用toDataURL()将抛出错误。
解决方案：img标签可以通过引入crossorigin属性来解决跨域问题，即crossOrigin=Anonymous 或crossOrigin=* 。请注意，手Q环境不支持匿名的设置，需要设置为 * 。如果使用crossorigin=anonymous ,则相当于匿名CORS。
问题2:设置了“crossOrigin”的img标签无法下拉跨域图片，无法触发img.onload
解决方案：后台转发或nigix代理，设置access-control-allow-origin:" wx . qlogo . cn "，允许静态资源服务器跨域镜像。这种设置解决了跨域图像采集的问题。(此处图片为用户头像域名wx.qlogo.cn，存在跨域问题)
问题三：安卓手机微信h5长按无法保存base64图片。
解决方法：将画布绘制的base64图片上传到服务器，然后从服务器获取png(jpg)图片。这种做法比较麻烦，需要以后想办法改进。
问题：上传到服务器的图片被严重压缩。
解决方案：上传的图片在服务器上会有几个资源，压缩程度不同。你可以从3358IMG10.360buyimg.com/promopic/.目录中得到像素更清晰的图像
问题五：绘制的二维码链接(//wqs.jd.com/xxx)长按无法直接进入页面。
解决方法：指定要绘制的二维码的链接必须添加http:否则二维码会被识别为文本。
//画布绘图部分编码：var pic URL= http://wx . qlogo . cn/MMO pen/oicsrgn 57 fqdximi 3 icnmexrfvuqruehcxrruwg 0 o1ea 1 bnybpkkkleq 5 fiaxfwodsltve 1 ptj 2 etsdhydjhgq/0 ；Var=newimage，canvas=document . createelement( canvas )，CTX=canvas.getcontext (2d )，//后台nigix代理见问题2 src=picurl . replace( 3358 wx . qlog . cn ，//wq.jd.com 。//解决canvas跨域toDataURL无法读取的问题。见问题1 img.crossOrigin= Anonymous//preload img . onload=function(){ canvas . width=img . width；canvas . height=img . height；ctx.drawImage( img，0，0)；//绘制的base64图片的LocalStorage.setItem(保存的图像数据，canvas . toda taurl( Image/png )；} img.src=src上传部分图片代码：
//见问题3 $。Ajax ({type: post ，URL:load js . add token( 3358 wq . JD . com/activetmp/promotepic/promoted pic ， j132 )用于上传图片，数据：{ filename: new Date()。getTime() math . floor(math . random()* 10000)。 jpg ，content: base64pic，active: shotpic20160901 }，Datatype: json ，xhrfields:{ with credentials:true }，success:function(data){ if(picdata . id==1 picdata . msg){//图片路径这个前缀路径的图片最清晰。见问题4 var img pre= 3358img10.360buyimg.com/promote.//图片地址拼接完整地址链接var photo=imgPre picdata.msg$ (# cardimg) [0]。onload=function () {//todo业务逻辑}；$(#cardImg )。attr(src ，照片)；} }，错误：函数(数据){ } })；这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。