微信小程序绘制网络图片的问题

一、问题描述

我的绘图过程是这样的：

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里。

第二次发文章，如有雷同纯属巧合，如有错误请指出，原创文章如需转载请标明出处。笔芯笔芯❤️