记录一下微信小程序组件wxml-to-canvas使用中遇到的坑

记录一下微信小程序组件wxml-to-canvas使用中遇到的坑

简介

最近在肝一个换装微信小程序(没错,又是学生处的老师脑袋一热,看见人家做了一个,那咱也得做一个!也不看看经费和工资QAQ...)用到了wxml-to-canvas,遇到了不少坑。但网上关于wxml-to-canvas的文章很少,我遇到的问题解决方案很少,于是我就打算写这篇文章记录一下。

wxml-to-canvas可以把静态的wxml和wxss样式绘制canvas,可以导出图片,可用于生成分享图等场景。

官方文档在此,尽管写的很简陋,但配合官方的代码片段demo还是可以快速入门:https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html

我们的小项目打算用图片层级的堆叠来实现换装预览的过程;之后把用户的选择,利用模板字符串${}导入到wxml模板中,和wxss一起,利用wxml-to-canvas生成canvas,最终导出图片进行保存。中间遇到的坑就在下面咯~

GitHub的链接在这里,可以来参考下:https://github.com/xiaomage2000/youthol-change-clothes

记录遇到的坑们

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对象打印到控制台的时候才发现了问题所在。

异常的项目报错

上图是出现异常的项目,下图是正常的官方demo。

正常的demo

可见上面两个对象一个有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

解决方案:这个是比较玄学的问题,我这里似乎是wxml-to-canvas的依赖没有正确安装。可以尝试一下重新安装wxml-to-canvas的依赖,或者把官方demo的miniprogram_npm文件夹下的wxml-to-canvas替换一下就可以了。

本文永久链接:https://blog.xmgspace.me/archives/wxml-to-canvas-records.html
本文文章标题:记录一下微信小程序组件wxml-to-canvas使用中遇到的坑
如无特殊说明,只要您标明转载自Xiaomage's Blog,就可自由转载本文。禁止CSDN/采集站采集转载。
授权协议:署名-非商业性使用-相同方式共享 4.0(CC BY-NC-SA 4.0)

评论

  1. 少时白
    Windows Chrome
    3年前
    2021-4-19 16:34:14

    细节,问题一完美解决我的报错

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇