業務中碰到微信小程序需要生成海報進行朋友圈分享，這個是非常常見的功能，沒想到實際操作的時候花了整整一天一夜才搞好，微信的 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 繪製可以用「非常難用」來形容，希望微信團隊能儘快優化。
你可以點擊「閱讀原文」獲取源碼。