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