1. 程式人生 > >微信小程序 canvas 繪圖問題總結

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

全局變量 矩形 wot hcm 像素 ces 地圖 源碼 order


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

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

?

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