一、問題描述

我的繪圖過程是這樣的：1.建立畫布；2.繪製一些內容，繪製到網路路徑的圖片，繪製接下來的內容；3.draw出圖片，canvasToTempFilePath生成圖片。開發者工具一切順利，手機上顯示不出網路路徑畫的圖片。

二、解決辦法

查看了多篇文章之後發現，網路圖片下到本地是需要時間的！所以，在畫到網路圖片的時候再下載圖片可能來不及了，具體解決方法有兩種，原理是一樣的。

1.在建立canvas之前就下載圖片，成功之後再開始畫canvas，舉個栗子：

// 下載網路路徑的圖片到本地再開始繪製canvas
let image = '網路路徑'
wx.getImageInfo({ // 或者用wx.downloadFile
  src: image,
  success: res => {
    let tempPath = res.path
    // 開始繪製canvas
    this.createCanvesFile(tempPath)
  }
})
 

2.網路圖片之後要繪製的內容都放在轉為本地路徑之後，舉個栗子：

const ctx = wx.createCanvasContext('shareCanvas')
// 圖片白底
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, 850, 1450)
ctx.save()
// 繪製網路路徑圖片
let wantImage = '網路路徑'
wx.getImageInfo({
  src: wantImage,
  success: res => {
    let tempPath = res.path
    // 繪製接下來的內容
    // 比如二維碼和提示文字
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 1200, 850, 1450)
    ctx.restore()
    ctx.save()
    let qrcodePath = '/static/write/qrcode.png'
    ctx.drawImage(qrcodePath, 50, 1220, 200, 200)
    ctx.textAlign = 'right'
    ctx.setFontSize(30)
    ctx.fillStyle = '#999999'
    ctx.fillText('長按識別圖中二維碼', 800, 1250)
    ctx.fillText('參與挑戰', 800, 1300)
    ctx.restore()
    ctx.save()
    ctx.draw(false, () => {
      // 生成圖片
      wx.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: res => {
          this.shareImg = res.tempFilePath
        }
      })
    })
  }
})
 

總結：重點應該是把draw方法畫在success裡。

第二次發文章，如有雷同純屬巧合，如有錯誤請指出，原創文章如需轉載請標明出處。筆芯筆芯❤️