微信小程序使用canvas自适应屏幕画海报并保存图

// 在onLoad中调用
const that = this
wx.getSystemInfo({
 suess: function (res) {
  console.log(res)
  that.setData({
   model: res.model,
   screen_width: res.windowWidth/375,
   screen_height: res.windowHeight
  })
 }
})

<canvas canvas-id="PosterCanvas" style="width:{{screen_width375+'px'}}; height:{{screen_height1.21+'px'}}"></canvas>
drawPoster(){
  let ctx = wx.createCanvasContext('PosterCanvas'),that=this.data;
  console.log('手机型号' + that.model,'宽'+that.screen_width375,'高'+ that.screen_height)
  let rpx = that.screen_width
  //这里的rpx是相对不同屏幕宽度的相对单位，实际的宽度测量，就是实际测出的px像素值rpx就可以了；之后无论实在iPhone5，iPhone6，iPhone7...都可以进行自适应。
  ctx.setFillStyle('#1A1A1A')
  ctx.fillRect(0, 0, rpx  375, that.screen_height  1.21)
  ctx.fillStyle = "#E8CDAA";
  ctx.setFontSize(29rpx)
  ctx.font = 'normal 400 Source Han Sans CN';
  ctx.fillText('Hi 朋友', 133rpx,66rpx)
  ctx.fillText('先领礼品再买车', 84rpx, 119rpx)
  ctx.drawImage('../../img/sell_index5.png', 26rpx, 185rpx, 324rpx, 314rpx)
  ctx.drawImage('../../img/post_car2x.png', 66  rpx, 222  rpx, 243  rpx, 145  rpx)
  ctx.setFontSize(16rpx)
  ctx.font = 'normal 400 Source Han Sans CN';
  ctx.fillText('长按扫描获取更多优惠', 108rpx, 545rpx)
  ctx.drawImage('../../img/code_icon2x.png', 68  rpx, 575  rpx, 79  rpx, 79  rpx)
  ctx.drawImage('../../img/code2_icon2x.png', 229  rpx, 575  rpx, 79  rpx, 79  rpx)
  ctx.setStrokeStyle('#666666')
  ctx.setLineWidth(1rpx)
  ctx.lineTo(187rpx,602rpx)
  ctx.lineTo(187rpx, 630rpx)
  ctx.stroke()
  ctx.fillStyle = "#fff"
  ctx.setFontSize(13  rpx)
  ctx.fillText('xxx科技汽车销售公司', 119  rpx, 663  rpx)
  ctx.fillStyle = "#666666"
  ctx.fillText('朝阳区·望京xxx科技大厦', 109  rpx, 689  rpx)
  ctx.setFillStyle('#fff')
  ctx.draw()
 },

ctx.draw(true, ()=>{
    // console.log('画完了')
    wx.canvasToTempFilePath()({
     x: 0,
     y: 0,
     width: rpx  375,
     height: that.screen_height  1.21,
     canvasId: 'PosterCanvas',
     suess: function (res) {
      // console.log(res.tempFilePath);
      wx.saveImageToPhotosAlbum({
       filePath: res.tempFilePath,
       suess: (res) => {
        console.log(res)
       },
       fail: (err) => { }
      })

     }
    }) 
   })

mpvue.saveImageToPhotosAlbum({
    filePath: __path,
    suess(res) {
     mpvue.showToast({
     title: '保存成功',
     icon: 'suess',
     duration: 800,
     mask:true
     });
     },
    fail(res) {
      if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {

     mpvue.showModal({
        title: '提示',
        content: '需要您授权保存相册',
        showCancel: false,
        suess:modalSuess=>{
         mpvue.openSetting({
          suess(settingdata) {
           // console.log("settingdata", settingdata)
           if (settingdata.authSetting['scope.writePhotosAlbum']) {
            mpvue.showModal({
             title: '提示',
             content: '获取权限成功,点击图片即可保存',
             showCancel: false,
            })
           } else {
            mpvue.showModal({
             title: '提示',
             content: '获取权限失败，将无法保存到相册哦~',
             showCancel: false,
            })
           }
          },
          fail(failData) {
           console.log("failData",failData)
          },
          plete(finishData) {
           console.log("finishData", finishData)
          }
         })
        }
       })
     }
     }
   });