微信小程序生成朋友圈分享图方案及canvas常见问题

　　微信小程序一种非常有效的推广方式：生成一张分享图片，分享到群聊或朋友圈。生成分享图片的方案大概有两种，一种是由服务端根据模版生成，另一种是由小程序的canvas组件生成，通过调用wx.canvasToTempFilePath(OBJECT)输出图片，wx.previewImage预览图片，wx.saveFile将图片保存到手机相册。

小程序的canvas有几个常见问题：

1、文字换行的问题：

解决方法：固定文字每行的字数，截取字符串，为了文字美观可以使用ctx.setTextAlign('center')让每行文字都水平居中。

2、如何将用户头像画成圆形的问题：

解决方法：制作一张和头像一样大的中间有个圆形镂空的正方形图片（如下图）覆盖绘制在头像上就可以。

3、使用canvas输出的图片模糊问题：

解决方法：调用wx.getSystemInfoSync()获取设备像素比pixelRatio，然后调用wx.canvasToTempFilePath(OBJECT)输出图片时设置destWidth和destHeight分别为canvas的宽*pixelRatio和canvas的高*pixelRatio。

4、绘制在线图片的时候图片不显示的问题：

解决方法：要在文件下载完成后再绘制。

另外推荐两个小程序canvas增强组件库，使用他们可以绘制出更丰富的图像。

WeZRender

https://github.com/guyoung/WeZRender

wxDraw

https://github.com/bobiscool/wxDraw

---

微信小程序研究加入