Canvas完成储存照片到当地的示例编码

2021-02-23 05:37 jianzhan

1、简介

要求: 将HTML5的內容储存为照片
思路: 根据Canvas制图转化成base64照片,长按便可储存到当地
难题: canvas严禁跨域、安卓系统手机微信长按不可以储存base64照片、服务器拉取的照片被缩小

2、实际难题

难题1:canvas是严禁跨域的,假如图象来自别的域,启用toDataURL()会抛出1个不正确

处理:<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:提交到服务器的照片缩小比较严重

处理:提交的照片会在服务器有几个資源,缩小度不1,从文件目录 'http://img10.360buyimg.com/promotepic/' 可拿到像素较清楚的照片。

难题5:绘图的2维码连接(//wqs.jd.com/xxx)长按不可以立即进到网页页面

处理:特定要绘图的2维码连接1定要再加http: 不然2维码将鉴别为文本

//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;

提交照片一部分编码:

// 提交照片 参照难题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){
    }
});

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。