很简单的,就是通过canvas绘制而成的图片。
1、在wxml中放置<canvas canvas-id=“myCanvas”/>标签。
2、创建canvas绘图上下文: const ctx = wx.createCanvasContext(‘myCanvas’);
3、通过wx.download()接口下载你要绘制的图片素材,获得一个临时路径tempFilePath。
4、调用canvas的drawImage接口将图片素材(第3步的tempFilePath)绘制到canvas画布上面。
ctx.drawImage(tempFilePath,0,0,100,100);
ctx.draw();//绘制完成
5、绘制完成之后将画布导出图片,并获得临时路径tempFilePath,具体接口如下
wx.canvasToTempFilePath();
6、最好调用预览图片接口,传入第5步的tempFilePath,预览您生成的图片,具体接口如下
wx.previewImage();
“运动步数群排行”小程序,可以生成类似图片。可以体验一下。