只要是一张可以正常查看的图片，一般老说通过 canvas 就可以将这个图片直接绘制出来。但是在微信小程序里面canvas 有一个坑就是不能够直接利用网络图片进行绘制。这在微信开发者工具中模拟是正常的，但是在手机端则显得力不从心了 — 画不出来啊！！！

不过，并不是没有解决方案。通过使用 wx.getImageInfo 的方式可以将网络图片缓存下来，然后我们使用缓存的图片地址来进行画图。效果是相当的漂亮了。

下面来实现一个小程序画图并保存的功能：

创建画布

1
<canvas canvas-id="huahua" />

获取网络图片并缓存

1
2
3
4
5
6
7
8
9
10
wx.getImageInfo({
  src: 'https://xxxx.png',
  success: res => {
    wx.setStorageSync('pic', {
      path: res.path,
      width: res.width,
      height: res.height
    });
  }
});

绘制图片

1
2
3
4
5
6
let picObj = wx.getStorageSync('pic');
if (picObj && picObj.path) {
  let ctx = wx.createCanvasContext('2d');
  ctx.drawImage(picObj.path, 0, 0, picObj.width, picObj.height);
  ctx.draw(true);
}

保存图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
wx.canvasToTempFilePath({
  canvasId: 'huahua',
  success: res => {
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success: info => {
        console.log(info);
      },
      fail: err => {
        console.log(err);
      }
    });
  },
  fail: err => {
    console.log(err);
  }
});

base64位的图片在模拟器上也是可以画出来的，但是在真机上画不出来，可以将 base64位换成网络 url 形式的图片再进行操作。