【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)

可在系列教程的基础上继续,也可以单独使

微信小程序-原生】系列教程

在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面

.

.

海报通过进行绘制

详见代码中的注释技术要点一:画布的最终大小需要按设备像素比进行转换技术要点二:需先清空画布后绘制底色为避免多次渲染导致累积层叠绘制,每次都需清空画布若未绘制底色,则最终保存的海报会是透明的(若想生成背景透明的海报,请删除绘制画布底色的代码)技术要点三:保持图片的宽高比

此处需要异步解析图片,获取源图片的宽高,来计算宽高比

通过返回 ,方便借助 和 将异步变同步,避免过多的代码嵌套。技术要点四:绘制水平居中的文字 的参数依次为:文本内容、文本的 坐标,文本的 坐标水平居中的 坐标计算方法为:

技术要点五:绘制图片图片若是网络图片,则需等其异步加载完成后再绘制,所以后续生成图片等操作,都需在图片的 函数中执行技术要点六:生成小程序二维码云函数–生成小程序二维码

此处自定义的云函数名称为

_.此处需注意,因参数通过 场景值传递(且限定了长度,刚好和默认的 _ 值等长),在目标页面需添加代码识别该参数技术要点七:将转换为图片

此步可在 绘制后执行,也可以在点击保存海报时在执行

点击保存按钮时执行

不同的海报,内容和布局不同,需要修改对应的 绘制代码

© 版权声明
THE END
分享