canvas繪製微信海報分享

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰前端

前端

最近公司在作一個面向餐飲的微信小程序，公司但願在小程序中嵌入關注公衆號的功能，一開始是採用官方提供的official-account，配置公衆號關注組件，方便用戶快捷關注公衆號，可是這個組件的場景限制比較多，須要掃碼打開小程序纔開始顯示。web

在折騰了一番以後，最終決定提供二維碼，供用戶下載，掃碼關注。這裏咱們有兩種方案，第一種是讓後臺生成而後返回圖片連接，只須要傳後臺所須要的參數就好了，第二種方法，用canvas生成分享海報。最後咱們選擇了使用canvas製做分享海報的方式。canvas

「注意：由於小程序基礎版本比較老，致使本文使用的微信canvas版本比較老，學習思想便可！！！」小程序

效果

主要步驟

1. 新建微信小程序，並添加圖片

這一步真的太簡單了，就不闡述了，直接展現項目結構。這裏新建了一個resources文件，用來存放圖片文件微信小程序

2. 新建canvas容器

受各類環境的影響，圖片加載的很慢，爲了用戶體驗，不能一直白屏，咱們加上一個正在加載的效果。當圖片沒有加載出來的時候，顯示正在加載效果。微信

2.1 在pages\index\index.wxml中，先清空默認生成的代碼，而後加入下面的代碼。

<view class="generate-qorcode-container">
  <view class="generate-qorcode-loading" wx:if="{{loading}}">
    <view class="loading-text">加載中...</view>
  </view>
  <block hidden="{{!loading}}">
    <canvas class="canvas" style="{{'width: ' + (canvasW) + 'px; height: ' + (canvasH) + 'px;'}}" canvas-id="qrcodeCanvas" 
      hidden="{{canvasHidden}}"></canvas>
    <view class="generate-qorcode-save">
      <view class="save-btn-box">
        <view class="save-btn" bindtap="save">保存圖片</view>
      </view>
    </view>
  </block>
</view>
複製代碼

使用loading變量來控制是不是正在加載。markdown

2.2 在pages\index\index.wxss中

.generate-qorcode-container {
  width: 100%;
  position: relative;
}
.generate-qorcode-container .generate-qorcode-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.generate-qorcode-container .canvas {
  margin: 0 auto;
}
.generate-qorcode-container generate-qorcode-save {
  padding-top: 24rpx;
  padding-bottom: 30rpx;
  background-color: #fff;
}
.generate-qorcode-container .save-text {
  width: 100%;
  margin-bottom: 21rpx;
  font-size: 26rpx;
  line-height: 1.5;
  color: #999;
  text-align: center;
}
.generate-qorcode-container .save-btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.generate-qorcode-container .save-btn-box .save-btn {
  width: 300rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 25rpx;
  border-radius: 8rpx;
  text-align: center;
  color: #fff;
  background: -webkit-linear-gradient(left, #4a9eff, #24c1ff);
}
複製代碼

這裏咱們爲了讓加載能夠居中，使用了position：relative屬性，而且top/bottom/left/right均爲0 ，這樣能夠在父元素未定寬高的狀況下居中，而且使用了z-index,將整個loading，置於畫面之上。app

2.4 最終效果

3 核心代碼

3.1 定義所需數據

「背景圖片」 「logo」 「二維碼」 「設備的圖片像素比」 「是否加載中」 「canvs的寬」 「canvas的高」xss

  data: {
    bgImg: '/resources/images/bg.png',
    logoImg :'/resources/images/juejin.png', 
    QRCodeImg :'/resources/images/qrcode.png',
    pixelRatio: 2,
    loading: false,
    canvasW:0,
    canvasH:0
  },
複製代碼

3.2 初始化數據

經過微信官方提供的getSystemInfo方法，獲取手機的圖片像素比，屏幕的寬高，圖片像素比在進行海報下載的時候會用到，主要是用來優化圖片的像素，顯示的更加清晰。函數

   // 在組件徹底初始化完畢
  attached() {
    let that = this
    // 進入頁面，出現開始加載的畫面
    that.setData({
      loading: true,
    })
    // 獲取設備寬度，計算canvas寬高
    wx.getSystemInfo({
      success: function (res) {
        // 這裏沒有設置canvas的寬高爲100%
        that.setData({
          pixelRatio: res.pixelRatio, // 圖片像素比
          canvasW:res.screenWidth * 0.8,
          canvasH:res.screenWidth * 0.8 *1.3
        })
      }
    })
  },
複製代碼

3.3 開始繪製

獲取canvas對象

 let that = this
 const ctx = wx.createCanvasContext('qrcodeCanvas', that)
複製代碼

繪製背景圖片

  ctx.drawImage(that.data.bgImg, 0, 0, that.data.canvasW, that.data.canvasH)
複製代碼

效果

繪製二維碼下面的白底

首先找出各個頂點的位置，爲了好看，使用arcTo函數加上一點圓角。半徑爲5。

  // 設定起始位置,寬高
      let rect = {
        x:  ( that.data.canvasW-(that.data.canvasW*0.7))/2,
        y:100,
        width: that.data.canvasW*0.7,
        height: that.data.canvasW*0.7 *1.2
      }

      // 計算各個位置的座標
      let ptA = that.point(rect.x + 5, rect.y)
      let ptB = that.point(rect.x + rect.width, rect.y)
      let ptC = that.point(rect.x + rect.width, rect.y + rect.height)
      let ptD = that.point(rect.x, rect.y + rect.height)
      let ptE = that.point(rect.x, rect.y)

      // 按照座標開始繪製
      ctx.beginPath()
      ctx.moveTo(ptA.x, ptA.y)
      ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, 5)
      ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, 5)
      ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, 5)
      ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, )
      // 填充顏色,保存畫筆位置
      ctx.strokeStyle = "#fff"
      ctx.stroke()
      ctx.setFillStyle('#fff')
      ctx.fill()
      ctx.save()
      
  //輔助函數
  point(x, y) {
      return {
        x,
        y
      }
    },
複製代碼

效果

繪製logo框

這裏主要是用到了兩個圓，一個大一個小，半徑相差1，這樣頭像就有了邊框。

繪製大圓

ctx.beginPath()   
ctx.arc(that.data.canvasW/2, 100,35, 0, Math.PI * 2, false)
ctx.setFillStyle('#eee')
ctx.fill()
ctx.save()
複製代碼

繪製小圓這裏繪製小圓以後，使用clip方法，使得以後的繪圖都會被限制在被剪切的區域內。

 // 畫小圓
  ctx.beginPath()
  ctx.arc(that.data.canvasW/2, 100,34, 0, Math.PI * 2, false)
  ctx.setFillStyle('#fff')
  ctx.fill()
  ctx.clip()
複製代碼

繪製logo圖片

ctx.drawImage(
  that.data.logoImg,
  that.data.canvasW / 2 - 34,
  66,
  68,
  68
)
// 恢復畫布
ctx.restore()
複製代碼

效果

繪製二維碼

 // 繪製二維碼
ctx.drawImage(that.data.QRCodeImg,( that.data.canvasW -140 )/2,150, 140, 140)

// 說明文字
ctx.setTextAlign('center')
ctx.setFontSize(14)
ctx.setFillStyle('#666')
console.log(( that.data.canvasW -140 )/2)
ctx.fillText('長按小程序碼，查看詳情', that.data.canvasW-150 , 320)
複製代碼

效果

關閉加載動畫

ctx.draw(true, () => {
    that.setData({
      loading: false
    })
  })
複製代碼

總結

至此使用canvas繪製海報的流程已經結束了，整體看來仍是比較簡單的，難一點的地方就是具體座標的計算，建議你們在草稿紙上畫個草圖，方便計算座標。

下面就開始實現用戶下載的功能。

4. 兩步走下載圖片

4.1 canvasToTempFilePath

    // 保存圖片
    save() {
      let that = this
      wx.canvasToTempFilePath({
        x: 0, // 起點橫座標
        y: 0, // 起點縱座標
        width: that.data.canvasW, 
        height: that.data.canvasH, 
        destWidth: that.data.canvasW * that.data.pixelRatio, 
        destHeight: that.data.canvasH * that.data.pixelRatio, 
        canvasId: 'qrcodeCanvas',
        success: function (res) {
          //調取小程序當中獲取圖片
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              wx.showToast({
                title: '圖片保存成功！',
                icon: 'none'
              })
            },
            fail: function (res) {
              console.log(res)
              if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
                that.doAuth()
              }
            }
          })
        },
        fail: function (res) {
          console.log(res)
        }
      }, this)
    },
複製代碼

4.2 獲取保存圖片的權限

step1: 彈出受權對話框

step2: 打開seetting頁面

step3: 判斷

  // 獲取受權
    doAuth() {
      wx.showModal({
        title: '獲取受權',
        content: '贊成從新受權保存圖片？',
        cancelText: '不一樣意',
        confirmText: '贊成',
        confirmColor: '#21c0ae',
        success: function (res) {
          if (res.confirm) {
            wx.openSetting({
              success(settingdata) {
                if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                  console.log("獲取權限成功")
                } else {
                  console.log("獲取權限失敗")
                }
              },
              fail: function (res) {
                console.log(res)
              }
            })
          }
        }
      })
    },
複製代碼