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

業務中碰到微信小程序須要生成海報進行朋友圈分享，這個是很是常見的功能，沒想到實際操做的時候花了整整一天一晚上才搞好，微信的 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 繪製能夠用「很是難用」來形容，但願微信團隊能儘快優化。

你能夠點擊「閱讀原文」獲取源碼。