小程序实时生成可分享卡片的方案。

Question

• 需求背景：用户评论后实时生成一个图文卡片，可保存至手机后分享给朋友，像豆瓣标记某本书后生成的卡片

• 思路之一是用canvas画好图文，后通过API：wx.canvasToTempFilePath(OBJECT)输出为图片，预览该图片，用户可保存该图片到手机，而后可分享给朋友；

• 一些问题：文字换行，html5 canvas可通过measureText测量文字宽度来实现换行，而小程序API没有提供这个；

• 其他：

  1. 不知道能否直接用wxml写好卡片，再将其转化为图片，似乎想多了...

  2. 看到WeZRender:微信小程序Canvas增强组件, 来源于ZRender：一个轻量级Canvas类库，未确定是否能解决文字换行的问题

不知道这种需求，你们是怎么实现的；如果是用canvas，文字换行的问题是怎么解决的；是否还有其他比较重要的问题？

Answer 1

• 文字换行解决方案：

  • 使用WeZRender绘图，文字间加上"n"换行符，可以成功换行，根据这个，可以限制一行显示固定字数比如20个，在画文字前，先在该换行的位置出入"n"；

  • 按照上面这个思路，直接canvas画图的话，也可将文字分多段画

• 其他的问题：

  • 图片以圆形显示：暂不确定WeZRender可否用一个同样大小的圆来裁切图片，从而使得以圆形显示

  • 卡片圆角：同上

  • canvas输出图片模糊：使得输出宽高为canvas宽高*设备像素比可解决，相关问题链接

Answer 2

楼主 怎么解决的啊