使用 canvas 生成微信小程序分享图片

更新日期: 2020-05-24 阅读次数: 3448 字数: 318 分类: 微信小程序

三方类库

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 聊聊, 查看更多联系方式