微信小程序 wxml2canvas 页面截屏保存为图片

736 阅读1分钟

背景: 技术经理要求“下载简历”功能,可以将当前页面生成为图片并且下载

百度一番,使用了官方推荐的wxml2canvas

开始!!!

1、给要画的节点加上draw类名

image.png

2、页面底部放一个canvas标签,id为myCanvas

image.png

3、点击下载触发函数

query.select()获取页面文档宽高,赋值给canvas,然后调用draw()函数,正式画图

image.png

4、draw()函数实现

image.png

5、textarea文本换行问题处理

image.png 解决方案:

将长文本拆成数组,循环渲染view

image.png

image.png

好了,截屏完成!!!感谢大佬作者开源~

效果图:

image.png

image.png

结语:

不知道textarea的换行问题理解对不对哈,反正问题解决了,妄大佬纠正~

还有一个圆角的问题,应该可以用背景图代替,我回头优化一下


微信开放社区文档地址:developers.weixin.qq.com/community/d…