微信小程式 canvas 繪圖問題總結

業務非常簡單，只需要將用到的圖片，文案素材拼裝到一張圖片，保存到本地就可以了。

首先創建畫布，將一張網上的圖片畫到畫布上。

const ctx = wx.createCanvasContext('shareCanvas');
ctx.drawImage("https://img3.doubanio.com/view/photo/l/public/p2327709524.jpg", 0, 0, 300, 400);
ctx.draw();

網路圖片

這時候出現一個問題：在模擬器上沒有報錯，可是真機測試卻什麼也沒畫出來。網上搜索一陣發現微信小程式的 canvas.drawImage 是不支持網路圖片的，只支持本地圖片。所以，任何的網路圖片都需要先緩存到本地，再通過 drawImage 調用存儲的本地資源進行繪製，緩存可以通過 wx.getImageInfo 和 wx.downloadFile 實現，這次選用了 wx.getImageInfo, wx.downloadFile 沒有試過，不知道可不可以。

wx.getImageInfo({
  src: 'https://img3.doubanio.com/view/photo/l/public/p2327709524.jpg',
  success: function (res) {
    console.log(res.width)
    console.log(res.path)
  }
})

這個方法可以拿到存儲的本地圖片地址，長寬以及一些簡單的圖形變化，將本地緩存的圖片地址保存到全局變數或者緩存供 wx.drawImage 調用。

還有一點需要註意的是 draw 方法是非同步的，如果圖片還沒載入成功，有可能畫出來的是空的，所以 draw 方法通常都會帶有定時器這樣的回調。

ctx.draw(true,setTimeout(function(){
    wx.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: function(res){
            that.data.tmpPath = res.tempFilePath
        },
    })
},1000));

圖片保存的授權問題

繪圖後通過 1 秒的延時將畫好的新圖片保存到本地，然後通過 wx.saveImageToPhotosAlbum() 保存到手機相冊。這一步存在授權問題，需要考慮拒絕授權後的相容性，也就是如果用戶拒接授權以後怎麼辦？常見的做法是先通過 wx.getSetting() 獲取用戶的許可權設置，如果用戶拒絕了訪問相冊的許可權，可以跳轉到授權設置頁面要求用戶更改授權信息。

小程式的授權設置 api 已經棄用了，現在只能通過組件形式，將 button 的 open-type 屬性設置成 openSetting，自動跳轉到設置頁面，總體來說沒有之前方便了。如果頁面本來已經有 button可以先將 open-type 屬性設成 null，當遇到需要跳轉的邏輯再通過 setData 設置，這樣處理非常複雜，很容易出錯，但是可以節省頁面或者跳轉；另一種處理方式是，當沒有授權時先跳轉到說明頁面，說明需要授權的信息，在這個頁面上添加一個 open-type 的button，點擊以後跳轉到設置頁面，這次我們採用的是第一種方法：

文字編輯換行

下一步是文字編輯的問題，微信畫文字是不支持自動換行的，所以只能手動計算每一行能夠容納的文字個數進行手動換行，比如一個文字加間距占 10 px，一行整體可以使用 100 px，那就是每行只能容納 10 個字，第 11 個字另起一行開始畫。

將文字分割成 10 個字的數組：

function canvasWorkBreak(maxWidth, fontSize, text) {
  const maxLength = maxWidth / fontSize
  const textLength = text.length
  let textRowArr = []
  let tmp = 0
  while (1) {
    textRowArr.push(text.substr(tmp, maxLength))
    tmp += maxLength
    if (tmp >= textLength) {
      return textRowArr
    }
  }
}

將數組一行一行畫到畫布上：

var height = 200
for (let item of ['我的舍利佛','搜房法拉']) {
    if (item !== 'a') {
        ctx.setFontSize(16);
        ctx.setFillStyle("#484a3d");
        ctx.fillText(item, 20, height);
        height += 50;
    }
}

多圖繪製

把每一種元素畫完以後整個海報製作的流程就已經跑通了，但並不代表在實際業務中就可以使用了。首先面對的是海報生成的質量問題，假設我們的手機像素是 320 * 400 的，如果要將圖片展示在手機上用於預覽，只有兩種選擇：

1. 畫一個解析度小於手機解析度的海報，讓手機能完整的展示出來。但是這樣的海報由於解析度小，下載到手機相冊分享用大屏手機觀看的時候就非常影響體驗了。這種做法的解決方案可以是畫 2 張圖，手機預覽時隱藏大圖，只顯示小圖；下載的時候將大圖保存起來。
2. 畫一張大圖，直接通過 previewImage 進入手機預覽模式，預覽模式的圖片可以直接保存到本地。這種方案的缺點在於預覽模式無法設計 UI，且下載的時候不能自定義文案，由於下載保存的入口很隱蔽，用戶不一定能發現。

圖片太長怎麼辦？

上面的圖實際上是比較長的，你可以截取一部分顯示出來，這樣圖片看起來就會更協調。在通過正常比例繪製完圖片以後，可以通過填充矩形的方式覆蓋一部分圖片，然後在矩形上輸入其他的內容，這樣圖片的一部分就被隱藏起來了。

按鈕置於最上層

由於 canvas 是優先順序最高的，總是會覆蓋頁面上的其他內容，所以「保存圖片」的按鈕可能會被覆蓋掉而顯示不出來，可以通過在 button 上套一層 cover-view 來解決。

總結

圖片繪製本來應該是一個非常簡單也非常成熟的技術，其他的框架都會有對應的組件來處理這些事情，可是微信小程式的 canvas 繪製可以用「非常難用」來形容，希望微信團隊能儘快優化。

你可以點擊「閱讀原文」獲取源碼。