uni-app开发抖音小程序创建canvas赋值,报错Converting circular structure to JSON

主要是canvas上的,在调用完canvas.getCanvastext(“2d”)这个方法后,

this.createSelectorQuery().in(this).select("#share").fields({ node: true, size: true }).exec((res)=>{
  this.node = res[0].node;
  this.ctx = res[0].node.getContext('2d'); // 多次走下来,都是到了这里报错
  const dpr = uni.getSystemInfoSync().pixelRatio;
  this.node.width = res[0].width * dpr
  this.node.height = res[0].height * dpr
  this.ctx.scale(dpr, dpr)
})

出现了报错信息,而后页面上出现异常,这是报错信息:

TypeError: Converting circular structure to JSON
at JSON.stringify (<anonymous>)
at cloneWithData (common/vendor.js:8129:26)
at VueComponent.patch [as __patch__] (common/vendor.js:8142:14)
at VueComponent.Vue._update (common/vendor.js:6473:19)
at VueComponent.updateComponent (common/vendor.js:8210:8)
at Watcher.get (common/vendor.js:6933:25)
at Watcher.run (common/vendor.js:7008:22)
at flushSchedulerQueue (common/vendor.js:6764:13)
at Array.<anonymous> (common/vendor.js:4503:12)
at flushCallbacks (common/vendor.js:4431:14)

就是这一大串,一开始很蠢,只看到了JSON.stringify,以为在某个地方调用这个方法出错了,但是经过排查之后发现我的代码里并没有地方调用这个方法,而后通过一步步走下来,发现是因为我将canvas.getCanvastext(“2d”)的返回值赋值给了data中的ctx变量,可能就是这一步导致了对象循环引用,目前不知道为什么会出现这种问题,因为这个项目是H5、微信小程序、抖音小程序多端兼容的,在H5以及微信小程序上并没有发现这个问题,唯独在抖音小程序上出现了,最后只能在script的全局定义了一个变量用来存储ctx对象;

PS:如果有大佬知道原因的话,希望能够为我解惑,谢谢啦

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值