業務中碰到微信小程式需要生成海報進行朋友圈分享，這個是非常常見的功能，沒想到實際操作的時候花了整整一天一夜才搞好，微信的 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 的，如果要將圖片展示在手機上用於預覽，只有兩種選擇：
- 畫一個解析度小於手機解析度的海報，讓手機能完整的展示出來。但是這樣的海報由於解析度小，下載到手機相簿分享用大屏手機觀看的時候就非常影響體驗了。這種做法的解決方案可以是畫 2 張圖，手機預覽時隱藏大圖，只顯示小圖；下載的時候將大圖儲存起來。
- 畫一張大圖，直接通過 previewImage 進入手機預覽模式，預覽模式的圖片可以直接儲存到本地。這種方案的缺點在於預覽模式無法設計 UI，且下載的時候不能自定義文案，由於下載儲存的入口很隱蔽，使用者不一定能發現。
圖片太長怎麼辦？
上面的圖實際上是比較長的，你可以擷取一部分顯示出來，這樣圖片看起來就會更協調。在通過正常比例繪製完圖片以後，可以通過填充矩形的方式覆蓋一部分圖片，然後在矩形上輸入其他的內容，這樣圖片的一部分就被隱藏起來了。
按鈕置於最上層
由於 canvas 是優先順序最高的，總是會覆蓋頁面上的其他內容，所以「儲存圖片」的按鈕可能會被覆蓋掉而顯示不出來，可以通過在 button 上套一層 cover-view 來解決。
總結
圖片繪製本來應該是一個非常簡單也非常成熟的技術，其他的框架都會有對應的元件來處理這些事情，可是微信小程式的 canvas 繪製可以用「非常難用」來形容，希望微信團隊能儘快優化。
你可以點選「閱讀原文」獲取原始碼。