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

源码坊

一、简介
需求： 将HTML5的内容保存为图片
思路： 通过Canvas绘图生成base64图片，长按即可保存到本地
问题： canvas禁止跨域、安卓微信长按不能保存base64图片、服务器拉取的图片被压缩
二、具体问题
问题1：canvas是禁止跨域的，如果图像来自其他域，调用toDataURL()会抛出一个错误

解决：<img>标签通过引入 crossorigin 属性能解决跨域， 即crossOrigin="Anonymous" 或 crossOrigin="*"  请注意手q环境下设置 ‘Anonymous’不支持，需要设置为 '*'，如果使用 crossorigin="anonymous"，则相当于匿名 CORS
问题2：设置了”crossOrigin”的<img>标签不能拉下跨域的图片，无法触发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: 否则二维码将识别为文字

1. //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, 0 );            //将画好的base64图片             localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );      }       img.src = src;

复制代码

上传图片部分代码：

1. // 上传图片 参见问题3$.ajax({    type: 'POST',    url:  loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', "j132"),    data: {        filename: new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg',        content: base64pic,        active: "shotpic20160901"    },    dataType: 'json',    xhrFields: { withCredentials: true },    success: function(data) {                           if (picdata.id == 1 && picdata.msg) {                                    //图片路径 此前缀路径的图片最清晰 参见问题4                                    var imgPre = 'http://img10.360buyimg.com/promotepic/';                                    //图片地址拼接的完整地址链接                                    var photo = imgPre + picdata.msg;                                    $("#cardImg")[0].onload = function() {                                             //to do 业务逻辑                                    };                                    $("#cardImg").attr("src",photo);                           }    },    error:function(data){    }});

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持模板人源码论坛。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！模板人源码·版权声明


本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
      本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。        唯一网址: https://www.mubanren.com/thread-551-1-1.html