微信小程序 canvas 绘图问题总结

---

业务中碰到微信小程序需要生成海报进行朋友圈分享，这个是非常常见的功能，没想到实际操作的时候花了整整一天一夜才搞好，微信的 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 没有试过，不知道可不可以。