微信小程序利用canvas生成海报分享图片

利用微信小程序canvas生成海报分享图片，这个生成图片排版和适配不同尺寸的手机是一个难点，特别是图片适应问题，我处理的方法是动态获取容器的宽度进行适应就是利用微信API wx.createSelectorQuery(),不知道还有没有更好的办法可以请教。

微信截图_20180628174733.png

  sharePosteCanvas:function(){
    wx.showLoading({ title: '生成中', mask: true, })
    var that = this;
   //创建一个canvas
    const ctx = wx.createCanvasContext('myCanvas'); 
    var width = ""
  //获取整个容器宽高id为canvas-container
    wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {
      var height = rect.height;
      var right = rect.right;
      width = rect.width * 0.8;
      var left = rect.left + 5;

      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, rect.width, height);

      //主图
        ctx.drawImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530190103768&di=490db43db3a9d82a65e627dab4d4f03e&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201502%2F11%2F20150211185255_v3Qrm.jpeg', left, 20, width, width)
        ctx.setFontSize(14);
        ctx.setFillStyle('#fff')
        ctx.setTextAlign('left');



        ctx.fillText('美丽', left + 20, width - 4);//标签
        const metrics = ctx.measureText('美丽');//测量文本信息
        ctx.stroke();
        ctx.rect(left + 10, width - 20, metrics.width + 40, 25);
        ctx.setFillStyle('rgba(255,255,255,0.4)')
        ctx.fill()
      
         //姓名
        ctx.setFontSize(14);
        ctx.setFillStyle('#000')
        ctx.setTextAlign('left');
        ctx.fillText('大个', left, width + 60);//姓名
     
      
        //职位
        ctx.setFontSize(12);
        ctx.setFillStyle('#666')
        ctx.setTextAlign('left');
        ctx.fillText('CEO', left, width + 85);//职位
      
      
        ctx.setFontSize(12);
        ctx.setFillStyle('#666')
        ctx.setTextAlign('left');
        ctx.fillText('1888888888', left, width + 105);//电话
    
      
        // 公司名称
        const CONTENT_ROW_LENGTH = 24;  // 正文 单行显示字符长度
        let [contentLeng, contentArray, contentRows] = that.textByteLength('美丽人生有限公司', CONTENT_ROW_LENGTH);//调用文字换行的函数
        ctx.setTextAlign('left')
        ctx.setFillStyle('#000')
        ctx.setFontSize(10);
        let contentHh = 22 * 1;
        for (let m = 0; m < contentArray.length; m++) {
          ctx.fillText(contentArray[m], left, width + 150 + contentHh * m);
        }
    
     
      //  绘制二维码
      ctx.drawImage('http://img.zcool.cn/community/014b7a580987afa84a0e282b12f472.jpg@900w_1l_2o_100sh.jpg', left + 150, width + 40, width / 3, width / 3)
      ctx.setFontSize(10);
      ctx.setFillStyle('#000')
      ctx.setTextAlign('right');
      ctx.fillText("微信扫码或长按识别", left + 235, width + 150);
      ctx.draw();
    }).exec()
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: function (res) {
          wx.hideLoading();
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath
          });
        }
      });
    }, 500);
  },

  textByteLength(text, num) {  // text为传入的文本  num为单行显示的字节长度
    let strLength = 0; // text byte length
    let rows = 1;
    let str = 0;
    let arr = [];
    for (let j = 0; j < text.length; j++) {
      if (text.charCodeAt(j) > 255) {
        strLength += 2;
        if (strLength > rows * num) {
          strLength++;
          arr.push(text.slice(str, j));
          str = j;
          rows++;
        }
      } else {
        strLength++;
        if (strLength > rows * num) {
          arr.push(text.slice(str, j));
          str = j;
          rows++;
        }
      }
    }
    arr.push(text.slice(str, text.length));
    return [strLength, arr, rows]   //  [处理文字的总字节长度，每行显示内容的数组，行数]
  },

  //点击保存到相册
  saveShareImg: function () {
    wx.showLoading({ title: '正在保存', mask: true, })
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,//生成的图片路径
      success(res) {
        wx.hideLoading();
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
            
             
            }
          }, fail: function (res) {
           
          }
        })
      }
    })
  },

这里就生成一个可以保存图片的海报了。