小程序 如何生成图片？
发布于 6 年前 作者 gyu 3652 次浏览 来自 问答

有没有人知道，群应用 那个小程序， 会生成一个 名片 图片， 这个是如何实现的？ 是后台返回的图片地址么？ 还是怎么样实现的？

有没有人知道， 最近在搞这个， 再整不出来，老板要砍人了。。。。

7 回复

好的， 有点思路了， 如果想在canvas上面加一些文字描述，也是可以的么？

ok 我去尝试一下。 谢谢了。 方便加个好友么？

是的，通过canvas绘制文字。

你好，感觉还是有几个地方有疑虑， 什么时候有时间，方便问您几个小问题么？

有遇到文字换行的问题么，是否找到解决方案？

获取到的临时图片画布上显示不出来

很简单的，就是通过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();

“运动步数群排行”小程序，可以生成类似图片。可以体验一下。

回到顶部