三方类库
https://github.com/kuckboy1994/mp_canvas_drawer
使用方法
<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
painting 即需要传入的 json 设置。
但是，为何还需要一个 getImage 的回调呢？
getImage 方法是绘图完成之后的回调函数，在 event.detail 中返回绘制完成的图片地址。
推荐阅读一下 github 上的示例代码，特别是 pages/index/index
背景图设置
背景图是通过设置一张 top, left 为 0，width, height 为 canvas 宽高的图片来实现的。
json 中后设置的图片，会覆盖之前设置的图片显示。以此达到前景，背景的效果。
较大的 PNG 可通过使用高压缩比的 JPG 来缩写图片文件体积。
背景图的宽高设置
这个需要基于原始设计稿的宽高比，通过比例计算器，得到对应的 canvas 高度。
图片圆角
找到一个三方的 fork 实现：
https://github.com/Haydencheung/mp_canvas_drawer
{
type: 'image',
...
borderRadius:10
},
圆形头像的实现
先铺上原始的方形头像，然后在相同的区域，放上一个中间镂空的透明 PNG，以此实现圆形头像的效果。
可以试试圆角 borderRadius 的实现。
图片为 Base64 怎么处理
- https://github.com/kuckboy1994/mp_canvas_drawer/issues/77
- https://www.jianshu.com/p/a168bbf04f05
ArrayBuffer wx.base64ToArrayBuffer(string base64)
基础库 1.1.0 开始支持，低版本需做兼容处理。
从基础库 2.4.0 开始，本接口停止维护。尽量还是不要使用 base64 的格式。
width, height 的单位是什么
例子用的是 375，代表什么？
富文本问题
js 从 html 中提取文本？
myString.replace(/<[^>]*>?/gm, '');
文本显示前 N 行
MaxLineNumber 最大行数，只有设置 breakWord: true ，当前属性才有效，超出行数内容的显示为…
需要注意的问题
- 头像的域名 是微信的URL地址，不是合法的小程序downloadfile地址。自己在小程序后台配置下就好了。
网页版
https://github.com/willnewii/json2canvas
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式