小程序使用 Canvas 自適應屏幕畫海報並保存圖片

小程序canvas的API並無像其餘的同樣支持小程序獨有的 rpx 自適應尺寸單位，在繪製內容時所應用的單位仍然是 px，那麼如何實現不一樣尺寸屏幕的自適應呢？

咱們的在開發中經常使用的參考屏幕尺寸（iPhone6）爲：375*667；

那麼想要適應其餘尺寸的屏幕時只需按照iPhone6的繪製大小按比例進行換算便可：

獲取系統屏幕尺寸

先利用wx.getSystemInfo （獲取系統信息）的API獲取屏幕寬度，而後除iPhone6的屏幕寬度，便可獲得相對單位

// 在onLoad中調用
const that = this
wx.getSystemInfo({
  success: function (res) {
    console.log(res)
    that.setData({
      model: res.model,
      screen_width: res.windowWidth/375,
      screen_height: res.windowHeight
    })
  }
})
複製代碼

在繪製方法中將參數乘以相對單位便可實現自適應

這裏的rpx是相對不一樣屏幕寬度的相對單位，測量出得實際寬度，就是實際測出的px像素值*rpx就能夠了；以後不管實在iPhone5，iPhone6，iPhone7...均可以進行自適應。

這裏的html也要動態的設置寬和高

<canvas canvas-id="PosterCanvas" style="width:{{screen_width*375+'px'}}; height:{{screen_height*1.21+'px'}}"></canvas>
複製代碼

drawPoster(){
    let ctx = wx.createCanvasContext('PosterCanvas'),that=this.data;
    console.log('手機型號' + that.model,'寬'+that.screen_width*375,'高'+ 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(29*rpx)
    ctx.font = 'normal 400 Source Han Sans CN';
    ctx.fillText('Hi 朋友', 133*rpx,66*rpx)
    ctx.fillText('先領禮品再買車', 84*rpx, 119*rpx)
    ctx.drawImage('../../img/sell_index5.png', 26*rpx, 185*rpx, 324*rpx, 314*rpx)
    ctx.drawImage('../../img/post_car2x.png', 66 * rpx, 222 * rpx, 243 * rpx, 145 * rpx)
    ctx.setFontSize(16*rpx)
    ctx.font = 'normal 400 Source Han Sans CN';
    ctx.fillText('長按掃描獲取更多優惠', 108*rpx, 545*rpx)
    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(1*rpx)
    ctx.lineTo(187*rpx,602*rpx)
    ctx.lineTo(187*rpx, 630*rpx)
    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.drawImage()會出錯,不能畫出圖片，由於會訪問一個get請求，是一個異步操做，還沒等到get返回就執行了tx.draw()繪製畫布。 解決方案 就只在 wx.downloadFile()中成功下載了圖片在進行繪製畫布。

wx.downloadFile({
      url: that.data.url,
      success(res) {
        if (res.statusCode === 200) {
          // 活動
          ctx.drawImage(res.tempFilePath, 66 * rpx, 222 * rpx, 243 * rpx, 145 * rpx)
          // 二維碼
          ctx.draw()
        }
      }
    })
複製代碼

保存到相冊

很簡單就是在畫完圖片以後的draw回調函數裏調用canvasToTempFilePath()生產一個零時內存裏的連接，而後在調用saveImageToPhotosAlbum()就能夠了；其中牽扯到受權，若是你第一次拒絕了受權，你第二次進入的時候在iphone手機上是不會再次提醒你受權的，這時就須要你手動調用了；如下附上代碼！

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

          }
        }) 
      })
複製代碼

拒絕受權後再次提醒受權的代碼

mpvue.saveImageToPhotosAlbum({
        filePath: __path,
        success(res) {
          mpvue.showToast({
          title: '保存成功',
          icon: 'success',
          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,
                success:modalSuccess=>{
                  mpvue.openSetting({
                    success(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)
                    },
                    complete(finishData) {
                      console.log("finishData", finishData)
                    }
                  })
                }
              })
          }
         }
      });

複製代碼

至此就算完了，能幫到你就給點個贊吧！