微信小程序海报生成功能tyus

如果是H5页面的话给大家推荐一款不错的插件html2canvas，这个插件可以将html元素转为canvas并一键生成png图片，但是本文的重点是在小程序上如何实现生成图片的功能。因为小程序没有DOM，所以不能引用插件实现。

进入正题！！

step1

创建canvas组件

注意：canvas画布绘制的图片会被压缩导致失帧，可以通过增大画布大小来提高图片质量。并且该canvas元素不应该呈现给用户观看，所以利用绝对定位将元素隐藏。

image标签是用来展示最终海报生成效果的

step2

获取页面画布元素

因为canvas组件中的drawImage方法不接收网络图片地址，所以必须使用wx.getImageInfo将网络图片保存在本地缓存中，再通过drawImage将图片绘制在canvas画布上。

step3

到这里为止网络图片已经绘制在canvas画布上了，接下来就是将海报的效果图展示给用户并且保存到本地相册上。