微信小程序画图drawImage有时不显示，解决办法

图片来源于网络

问题现象

在微信小程序里调用drawImage函数画图，在微信开发者工具中显示正常，在真机上有时启动后不显示，关闭后重新开启又显示正常。

问题原因

产生该问题的原因，一般是由于图片加载问题导致。在图片尚未加载成功之前调用drawImage函数，将会导致画图失败。

解决途径

这个问题可以通过图片预加载方式来解决。
图片预加载方法，网上有人推荐使用Image组件的bindload事件来完成，若需要加载多张图片，则需要使用如下方式：
1.设一个容器，数字，数组都行。
2.给每个bindload事件都加一个相同的函数 ++或者push。
3.给预加载函数写个定时器，循环获取这个容器，达到预想值再执行，再清除定时器。
在这里，我们给出另一种实现方式，即使用wx.getImageInfo函数，下面给出代码样例。
（1）单张图片加载样例，（假定图片路径为imagePath，绘制函数为render）

  preLoad() {
    let scope = this;
    this.bindRender = this.render.bind(this)

    wx.getImageInfo({
      src: scope. imagePath,
      success(res) {
        setTimeout(scope.bindRender, 100);
      }
    })
  }

（2）多张图片加载样例，（假定imagePaths为存储图片路径的数组，绘制函数为render）

  loadImage(imagePaths, index) {
    let scope = this;
    if (imgs.length > index) {
      wx.getImageInfo({
        src: imagePaths [index],
        success(res) {
          scope.loadImage(imagePaths, index + 1)
        }
      })
    } else {
        setTimeout(scope.bindRender, 100);
    }
  }

  preLoad() {
    let scope = this;
    this.bindRender = this.render.bind(this)

    scope.loadImage(scope.imagePaths, 0);
  }