需求分析: 用户需要分享小程序卡片到朋友圈;
实现方式:小程序生成小程序码前后端都可以实现;
前端实现思路:从服务端拿回数据后利用 canvas 绘制成图片;
注意事项
1、小程序 canvas 绘制无法直接使用网络图片,需要使用 wx.downloadFile 方法,将返回的本地路径绘制到 canvas ,并且
图片路径需要转成服务端地址或者你的本地地址,通过 wx.downloadFile 方法得到一个微信的临时地址,这样做的目的是解决跨
域问题
2、拿到数据后 canvas 创建实例需要注意当前是否使用自定义 canvas 组件,如果是的话需要传入组件实例 this,绘制过程略,
完成后调用 wx.canvasToTempFilePath 方法得到绘制的图片
3、canvas 在小程序绘制文字截取无法准确计算文字宽度,h5 可以调用 CanvasRenderingContext2D.measureText(text) 这
个 API,可以返回一个TextMetrics对象,通过每个字符宽度的不断累加,精确计算哪个位置应该可以换行
4、该 canvas 无法复用