使用html2canvas绘制分享微信图像

案例如图：

image.png

基本原理：页面加载完成之后用canvas进行绘制页面，页面中只有一张图片就ok了；

代码如下：vue项目下

//根据window.devicePixelRatio获取像素比
 mounted() {
this. toCanvas()
}
    DPR() {
      if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
      }
      return 1;
    },
    parseValue(value) {
      return parseInt(value, 10);
    },
    toCanvas() {
      // 获取想要转换的 DOM 节点
      let box = this.$refs.box;
      let outBox = this.$refs.outBox;
      // DOM 节点计算后宽高
      let width = this.parseValue(box.width);
      let height = this.parseValue(box.height);
      // 获取像素比
      let scaleBy = 3;   // 此处原为DPR()计算出的像素比，为了清晰改了3倍；
      // 创建自定义 canvas 元素
      let canvas = document.createElement('canvas');

      // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
      canvas.width = width * scaleBy;
      canvas.height = height * scaleBy;

      // 获取画笔
      let context = canvas.getContext('2d');

      // 将所有绘制内容放大像素比倍
      context.scale(scaleBy, scaleBy);
      // 将自定义 canvas 作为配置项传入，开始绘制
      html2canvas(box).then(canvas => {
        outBox.innerHTML = '';
        let dataUrl = canvas.toDataURL('image/jpeg');
        let newImg = document.createElement('img');
        newImg.src = dataUrl;
        outBox.appendChild(newImg);
        outBox.children[0].style.width = '7.5rem';
        if (window.screen.height == 812) {
          outBox.style.marginTop = '1rem';
        }
        alert('长按图片发送给朋友');
      });
    },

注意问题：
1、绘制出图像的清晰度可绘制内容放大像素比倍；或者用Canvas2Image.js插件；
相关文章可参考文章：传送门 方案二
如果二维码扫不出考虑是否原图清晰度不够。
2，最好转成jpeg格式兼容安卓；
3，遇到微信头像等跨域问题，考虑让接口返回非跨域图像来处理；