微信小程序 canvas 合成海报

1、先百度了解canvas相关文档；
2、了解微信小程序授权登录与授权登录下保存图片权限问题；
3、canvas标签属性不能是display：none；
4、获取当前使用手机的像素比例

wx.getSystemInfo({
   success(res){
     // 通过像素比计算出画布的实际大小（330x490）是展示的出来的大小
     // this.width = 330 * res.pixelRatio
     // this.height = 490 * res.pixelRatio
     that.setData({
       statusBarHeight: res.statusBarHeight
     })
   }
 })

5、查询当前是否有权限；

 saveImg() {
    // 保存图片 获取相册权限
    let that = this;
      // success
      wx.getSetting({
        success(res) {
          console.log("res:", res);
          if (!res.authSetting['scope.writePhotosAlbum']) {
           that.firstGetHeadUrl();
          } else {
            that.firstGetHeadUrl();
           }
      })
  },

6、将网络文件路径转换为临时路径，一定要临时路径；

firstGetHeadUrl() {
    let that = this;
    // 获取二维码地址
    // //1会员 2商家 3区域合伙人 -->
    let url = ''
    if(that.data.userInfo.identity === '1') {
      url = that.data.userInfo.invitatCodeImage;
    } else {
      // 区域合伙人
      url = that.data.userInfo.partnerInvitCodeImage;
    }
    wx.downloadFile({
      url: url, //仅为示例，并非真实的资源 // https://wx.qlogo.cn/mmopen/vi_32
      success: (downloadFileRes) => {
        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
        console.log('downloadFileRes:', downloadFileRes);
        if (downloadFileRes.statusCode === 200) {
          that.drawImagefun(downloadFileRes.tempFilePath)
          // that.getBgUrl(downloadFileRes.tempFilePath);
        }
      },
      fail(fail) {
        console.log(fail);
      }
    })
  },

7、利用canvas合成对应的海报；

 drawImagefun(locationHeadUrl, locationBgUrl) {
    let that = this;
    // canvas对象生成规则；
    let ctx = wx.createCanvasContext('canvasPoster', this)

    // let canvasW = 773 // 画布的真实宽度
    // let canvasH = 1341 //画布的真实高度
    let canvasW = this.data.systemInfo.screenWidth // 画布的真实宽度
    // let canvasH = this.data.systemInfo.screenHeight //画布的真实高度
    let canvasH = this.data.systemInfo.screenWidth //画布的真实高度
    // 头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会 *this.systemInfo.pixelRatio
    // let headerW = 48 * this.data.systemInfo.pixelRatio
    // let headerX = (canvasW - headerW) / 2
    // let headerY = 40 * this.data.systemInfo.pixelRatio
    let qrcodeW = 120 * this.data.systemInfo.pixelRatio
    let qrcodeX = 128 * this.data.systemInfo.pixelRatio
    let qrcodeY = 120 * this.data.systemInfo.pixelRatio
    // 填充背景
    // ctx.drawImage(that.data.locationBgUrl, 0, 0, canvasW*2, canvasH*2)
    ctx.drawImage(locationBgUrl, 0, 0, canvasW*2, canvasH*2)
    ctx.save()
    // 控制头像为圆形
    // ctx.setStrokeStyle('rgba(0,0,0,.2)') //设置线条颜色，如果不设置默认是黑色，头像四周会出现黑边框
    // ctx.arc(headerX + headerW / 2, headerY + headerW / 2, headerW / 2, 0, 2 * Math.PI)
    // ctx.stroke()
    //画完之后执行clip()方法，否则不会出现圆形效果
    // ctx.clip()
    // 将头像画到画布上
    var name = '邀请码：' + that.data.curCode;
    //绘制名字
    ctx.setFontSize(26);
    ctx.setFillStyle('#333');
    ctx.setTextAlign('center');
    ctx.fillText(name, 375, 210);
    ctx.stroke();
    // 绘制账号
    // var phone = this.data.visterInfo.phone;
    //绘制名字
    // ctx.setFontSize(22);
    // ctx.setFillStyle('#fff');
    // ctx.setTextAlign('left');
    // ctx.fillText(phone, 152, 228);
    // ctx.stroke();
    // 绘制头像 http://tmp/wx0ba96f4a1539fbd8.o6zAJs1B8BUcYzW-usej…qOltMolRxYofa97f2c3400f2f04dc93b40e09499459d.jpeg
    
    // ctx.drawImage(this.data.logoUrl, 30,70,50,50)
    // wx.showModal({
    //   title: 'that.data.locationHeadUrl drawImage',
    //   content: locationHeadUrl,
    // })
    // ctx.drawImage(locationHeadUrl, 58, 170, 70, 70)
    // 绘制logo
    // ctx.drawImage(that.data.logoUrl, canvasW  - 60, canvasH*2 -70, 24, 24);
    
    // ctx.setFontSize(16);
    // ctx.setFillStyle('#333');
    // ctx.setTextAlign('left');
    // ctx.fillText('遨游视界', canvasW  - 30, canvasH*2 - 50);
    ctx.stroke();
    // ctx.restore()
    
    // 绘制二维码
    ctx.drawImage(locationHeadUrl, qrcodeX, qrcodeY, qrcodeW, qrcodeW)
    ctx.save()
    ctx.draw()
    setTimeout(() => {
      //下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试
      
      wx.canvasToTempFilePath({
        canvasId: 'canvasPoster',
        x: 13,
        y: 13,
        width: canvasW * 2 - 26,
        height: canvasH * 2 - 26,
        destWidth: canvasW * 2 - 26,
        destHeight: canvasH * 2 - 26,
        fileType: 'png',
        success: (res) => {
          console.log('canvasToTempFilePath res:', res);
          this.setData({
            poster: res.tempFilePath
          })
          wx.saveImageToPhotosAlbum({
            filePath: that.data.poster,
            success: (data) => {
              wx.showToast({
                title: '保存成功，快去朋友圈分享吧。',
                icon: 'success',
                duration: 4500
              })
              that.setData({
                isShowCanvase: false
              });
            },
            fail: (err) => {
              console.log('err:', err);
              if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                console.log("当初用户拒绝，再次发起授权")
                wx.openSetting({
                  success(settingdata) {
                    console.log(settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                    } else {
                      console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                      toastTip('获取权限失败，将无法保存图片！', 'none');
                    }
                  }
                })
              }
            },
            complete(res) {
              console.log("res2", res);
            }
          })
        }
      })
    }, 200)
  },