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

更新日期: 2020-05-24 阅读次数: 185 字数: 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

领取618阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
2020年06月30日 世界青年联欢节
2020年07月01日 中国共产党诞生日
2020年07月01日 香港回归日
查看更多节日