简介
wxml-to-canvas可以把静态的wxml和wxss样式绘制canvas,可以导出图片,可用于生成分享图等场景。
官方文档在此,尽管写的很简陋,但配合官方的代码片段demo还是可以快速入门:
我们的小项目打算用图片层级的堆叠来实现换装预览的过程;之后把用户的选择,利用模板字符串${}
导入到wxml模板中,和wxss一起,利用wxml-to-canvas生成canvas,最终导出图片进行保存。中间遇到的坑就在下面咯~
GitHub的链接在这里,可以来参考下:
记录遇到的坑们
fail canvas has not been created
绘制canvas时,控制台报错,提示canvas画布没有被创建:
(in promise) MiniProgramError renderToCanvas: fail canvas has not been created Error: renderToCanvas: fail canvas has not been created
我们的页面逻辑是这样的:用户在第一个页面中选择好人物的样式、穿着等,然后将用户的选择传递到第二个页面。
起初想的是在第二个页面onload的时候先接收用户的选择,然后将这些选择用模板字符串${}
导入到wxml模板中,之后this.widget = this.selectComponent('.widget')
生成widget对象初始化canvas,最后this.widget.renderToCanvas({wxml,style})
将wxml模板和wxss样式绘制到canvas上。看样子没有什么问题吧?但是就是报错。官方的demo是没有问题的。
最终在把官方demo和项目中的widget对象打印到控制台的时候才发现了问题所在。
可见上面两个对象一个有ctx: CanvasRenderingContext2D
的属性,一个没有。这就是关键所在。this.widget = this.selectComponent('.widget')
生成widget对象初始化canvas是需要一定时间的,onload函数中widget对象还没有初始化完毕就去调用,那么肯定会报错。
最终的解决方法是进行延迟,给含有this.widget.renderToCanvas({wxml,style})
的代码块加一个定时器,50毫秒后再执行,之后就OK了:
setTimeout(function () { //代码块在此 }, 50)
Cannot read property '' of undefined
生成canvas时报错,Cannot read property '' of undefined或Cannot read property 'xxx' of undefined:
(in promise) MiniProgramError Cannot read property '' of undefined TypeError: Cannot read property '' of undefined
解决方案:传入this.widget.renderToCanvas
中的参数名必须是wxml和style,不能是其他的。在定义这两个变量的时候就必须命名为wxml和style。
image format error
生成canvas时提示文件格式错误,但是同样的照片官方demo却没有问题:
(in promise) MiniProgramError image format error: /model/body1.png Error: image format error: /model/body1.png
细节,问题一完美解决我的报错