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

一、简介 @H_ 406 _5@

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

二、具体问题

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

解决：< img >标签通过引入 crossori gin 属性能解决跨域， 即crossOrigin="Anonymous" 或 crossOrigin="*"&nbs p; 请注意手q环境下设置 ‘Anonymous’不支持，需要设置为 '*'，如果使用 crossorigin="anonymous"，则相当于匿名 CORS

问题2：设置了]crossOrigin]的<img>标签不能拉下跨域的图片，无法触发img.onload

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

问题3：安卓手机微信h5长按不能保存base64图片

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

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

解决：上传的图片会在服务器有几个资源，压缩度不一，从目录 'http://img10. 360 buyimg .COM /p rom otepic/' 可拿到像素较清晰的图片。

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

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

//canvas绘制部分代码：

 VAR  picurl = "http://wx.qlogo.cn/mmo PE n/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.h ei ght = img.height;
             ctx.drawImage( img, 0, 0 );
            //将画好的base64图片
             localStorage.set IT em( "savedImageData", canvas.toDataURL("image/png") );
      }
       img.src = src;

上传图片部分代码：

// 上传图片 参见问题3
$.ajax({
    type: 'POST',
    url:  loadJs.addToken('http://wq.jd.com/active tmp / PR omotepic/promoteaddpic', "j132"),
    data: {
        filen am e: new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg',
        content: base64pic,
        active: "shotpic20160901"
    },
    dataType: 'json',
    x hr Fields: { withC red entials: 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){
    }
});

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

总结

以上是 为你收集整理的 Canvas实现保存图片到本地的示例代码 全部内容，希望文章能够帮你解决 Canvas实现保存图片到本地的示例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Canvas实现保存图片到本地的示例代码的详细内容...