最近一个产品需要是把微信服务号中一个网页内容生成一张图片，用户长按可以保存为图片，图片中的二维码可以识别，图片中包含用户头像。效果如图1-1

最常用的做法是把网页转换为cancas，接着转成图片，最流行的插件是html2canvas。官网的文档个人感觉不是特别好。html2canvas.hertzen.com/具体做法参考了此博客。segmentfault.com/a/119000001…。

图1-1

红色圆圈位置应该为微信头像的位置，web端获取不到用红圈代替。右下角二维码是根据后端数据渲染出来的动态二维码。

整个需求难点和坑分为几部分：

1.获取头像并且可以保存到canvas生成的img中（canvas对于跨域图片的处理一般是在原图片处显示空白---需要后端配合）

2.生成canvas比生成二维码或微信头像快，导致二维码没有附在canvas生成的整图中（异步处理，安排事件执行顺序）

3.设置canvas宽高为背景大图带小数的原始尺寸（通过offsetWidth width等获得的是取整之后的宽度 ）以及偏移尺寸。

4.图片清晰度处理（设置canvas画布缩放比）

1.处理canvas中跨域的问题，微信头像和自己的服务器必然不在同一个域，那首先需要前端设置canvas的配置项，允许跨域。网上有几种做法可以参考

1.1将微信头像上传到自己服务器，再返回前段图片地址，就不会涉及跨域问题。

1.2在NGINX上设置反向代理，把微信头像域名地址换成自己服务器的。（但是一旦微信头像更新域名这种做法就会出bug ）参考资料blog.csdn.net/mengruobaob…

location ^~ /wechat_image/ {add_header 'Access-Control-Allow-Origin' "$http_origin" always;add_header 'Access-Control-Allow-Credentials' 'true' always;add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-   Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;proxy_pass http://wx.qlogo.cn/;
}
复制代码

然后将微信的头像 wx.qlogo.cn/xxx => https://${自己的域名}/wechat_image/xxx和后端协商好下划线部分。

2.异步处理可以涉及很多内容，笔者自己也不是特别懂，此处不展开讲，下次专门出一篇异步的博客。此处处理将替换头像地址，生成动态二维码，canvas绘图按照前中后三步顺序执行，（没有做异步处理时，safiri中生成canvas比生成头像和生成二维码都快，导致最后的整图没有微信头像和二维码。）

3.生成canvas过程中会发现二维码的位置会在打开页面一秒左右往上方偏移一下，一开始以为是因为生成的画布以及图片和之前的dom节点高度不同，所以设置了画布高度时采用了getBoundingClientRect()获得实际dom元素宽高，以及生成画布过程中可能出现的偏移。

4.设置canvas的缩放scale。

代码如下：

 // $(function() {    function imgUrlChange(){    var wximg = $("#wximg").attr('src');      if(wximg){           var newimg =  window.location.origin +'/wechat_image'+ wximg.split("http://thirdwx.qlogo.cn")[1];    }else{     console.log('微信头像没有读取到');      }     $("#wximg").attr('src',newimg);   }   function  shareQRCode () {    return new Promise (function(resolve,reject){   setTimeout(function() {      var  shareid = $("#urldata").attr('uid');   var qrcode = new QRCode('qrcode', {  text: 'your content',width: 90, height: 90,  correctLevel: QRCode.CorrectLevel.H  });             //使用 API           qrcode.clear();      qrcode.makeCode(shareid);  console.log(2);       resolve();        },0)      })  }    function canvasImg (){    console.log(3)     setTimeout(function(){        var cntElem = $('#html2canvas')[0];   var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象 var cont = cntElem.getBoundingClientRect(); var width = cont.width; //获取dom 宽度  var height = cont.height; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点var scale = 2; //定义任意放大倍数 支持小数     canvas.width = width * scale; //定义canvas 宽度 * 缩放  canvas.height = height * scale; //定义canvas高度 *缩放  var context = canvas.getContext("2d");    context.scale(scale, scale); //获取context,设置scalecontext.translate(-cont.left,-cont.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位       var opts = {       scale: scale, // 添加的scale 参数canvas: canvas, //自定义 canvas  // logging: true, //日志开关，便于查看html2canvas的内部执行流程  width: width, //dom 原始宽度          height: height,              useCORS: true // 【重要】开启跨域配置       };           html2canvas(shareContent, opts).then(function (canvas) {  // 【重要】关闭抗锯齿      context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false;  context.msImageSmoothingEnabled = false;  context.imageSmoothingEnabled = false;   // 【重要】默认转化的格式为png,也可设置为其他格式    var image = canvas.toDataURL("image/png");          var pHtml = "<img src="+image+" />";          $('#html2canvas').html(pHtml);             $('#html2canvas>img').css({                "width": 100 + "%",                "height":height,             });            }, 200)             });
}      imgUrlChange()   shareQRCode().then(function() { canvasImg() }) // })复制代码