关于小程序用canvas绘制二维码分享页面

先上代码，然后再分析一下

  
  
    保存图片
  

 

// js的onLoad生命周期中
onLoad: function (options) {
    var that = this;
    //获取屏幕尺寸
    wx.getSystemInfo({
      success: function (res) {
        // 高度,宽度 单位为px
        that.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
    //下载图片
    let p1 = new Promise((resolve, reject) => {
      //下载背景图片
      wx.downloadFile({
        url: 'https://example.jpg',
        success: function (res) {
          resolve(res)
        }
      })
    })
    let p2 = new Promise((resolve, reject) => {
      //下载小程序码
      shareQrcode({
        share_user_id:app.globalData.userInfo.user_id
      }).then(res=>{
        var imgurl = res.data.qrcode;
        wx.downloadFile({
          url: imgurl,
          success: function (res) {
            resolve(res)
          }
        })
      })
      
    })
    let p3 = new Promise((resolve,reject)=>{
      //下载头像
      wx.downloadFile({
        url: app.globalData.userInfo.head_ico,
        success: function (res) {
          resolve(res)
        }
      })
    })
    Promise.all([p1, p2, p3]).then(res => {
      that.setData({
        canvasimgbg: res[0].tempFilePath,
        canvasimg1: res[1].tempFilePath,
        canvasheadimg:res[2].tempFilePath,
        name: app.globalData.userInfo.nickname
      })
      var context = wx.createCanvasContext('share');
      var canvasimgbg = that.data.canvasimgbg;
      var canvasimg1 = that.data.canvasimg1;
      var canvasheadimg = that.data.canvasheadimg ;
      var windowHeight = that.data.windowHeight;
      var windowWidth = that.data.windowWidth;
      
      context.setFillStyle('yellow');
      context.fillRect(0, 0, windowWidth, windowHeight)
      context.fill(); // 如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充
      context.drawImage(canvasimgbg, 0, 0, windowWidth, windowWidth*1.5);
      context.drawImage(canvasimg1, (windowWidth - 200) / 2, 100, 200, 200);
      context.save(); // 先保存状态 已便于画完圆再用
      context.beginPath(); // 开始绘制
      context.arc((windowWidth - 80) / 2 + 40, 390, 40, 0, Math.PI * 2, false);
      context.clip(); // 从原始画布中剪切任意形状和尺寸，这里是裁剪一个圆，为了画圆角图片用
      context.drawImage(canvasheadimg, (windowWidth - 80)/2,350,80,80);
      context.restore(); // 恢复之前保存的绘图上下文，可以继续绘制
      context.setFillStyle('#fff');
      context.setFontSize(20);
      var nameWidth = context.measureText(that.data.name).width; // 计算文字的宽度，为了设置文字居中
      context.fillText(that.data.name, (windowWidth-nameWidth)/2, 480);
      context.draw(true, that.getTempFilePath);
    })
  },

wx.canvasToTempFilePath()方法把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功

// 获取canvas绘制图片的临时路径，然后保存再本地
getTempFilePath: function () {
    wx.canvasToTempFilePath({
      canvasId: 'share',
      success: (res) => {
        this.setData({
          shareTempFilePath: res.tempFilePath
        })
      }
    })
 },

用户点击按钮保存图片
 

  // 保存至相册
  saveImageToPhotosAlbum: function () {
    var imgUrl = this.data.shareTempFilePath;
    wx.saveImageToPhotosAlbum({
      filePath: imgUrl,
      success: (res) => {
        wx.showToast({
          title: '保存成功',
          icon: 'none'
        })
      },
      fail: (err) => {
        wx.showToast({
          title: '保存失败',
          icon: 'none'
        })
      }
    })
  },

其中遇到的问题和一些说明：

1、画了一个填充的矩形之后，一直无法画圆形，经过查找、搜索才知道需要在画完矩形之后使用 context.fill() 方法闭合路径；

2、文字居中需要使用 context.measureText() 计算文字的宽度；

3、使用 promise.all() 异步的方法确认图片下载完成之后才开始绘制；

4、为了生成图片的自适应屏幕大小，建议整个背景用颜色填充，然后背景图片选用宽高比一定的 png 格式底色透明的图片，这样背景图片的宽度可以设置成屏幕宽度，高度也可以相应的设置。