uniapp开发微信小程序使用canvas保存图片时候报错canvasToTempFilePath:fail should pass canvasId or canvas

我使用的是uniapp里面的echarts开发的,它里面集成了微信小程序的canvas,所以如果你是原生微信小程序报这个错,其实解决办法是一样的。我这里写了一个uniapp使用echarts模板,可以看这篇文章:uniapp+uviewPlus+vue3+ts+pinia+vite+echarts 开发基础模板,开箱即用,非常顺手-CSDN博客 

但是在将它保存为图片的时候报错了: 

Error: MiniProgramError
{"errMsg":"canvasToTempFilePath:fail should pass canvasId or canvas"}
    at Object.errorReport (WAServiceMainContext.js?t=wechat&s=1702519940369&v=3.2.2:1)
    at Function.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1702519940369&v=3.2.2:1)
    at Object.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1702519940369&v=3.2.2:1)
    at i (WASubContext.js?t=wechat&s=1702519940369&v=3.2.2:1)
    at Object.cb (WASubContext.js?t=wechat&s=1702519940369&v=3.2.2:1)
    at V._privEmit (WASubContext.js?t=wechat&s=1702519940369&v=3.2.2:1)
    at V.emit (WASubContext.js?t=wechat&s=1702519940369&v=3.2.2:1)
    at WASubContext.js?t=wechat&s=1702519940369&v=3.2.2:1
    at n (WASubContext.js?t=wechat&s=1702519940369&v=3.2.2:1)
    at Le (WASubContext.js?t=wechat&s=1702519940369&v=3.2.2:1)(env: Windows,mp,1.06.2310080; lib: 3.2.2) 

问题原因和解决办法

一般的解决方案就是查看uni.canvasToTempFilePath的传参是否正确,一个是canvasId必须正确,另一个就是第二个参数为this;

但事情显示没那么简单,这二者我都有填写,却仍旧报这个错,我把canvasid换成别的,最后我想起了一件事情,就是canvas为空是因为没有识别到它,而导致没有识别到它可能是因为当前页面不存在这个元素。也就是要等待图标绘制完成之后,才能保存为图片!

果然,在我的代码里面,我是在canvas数据加载完成之后就可以保存图片的,但是这个时候页面可能还没渲染完成。我是在finished事件中使用的:

但是这个时候可能页面上还没渲染出来,所以需要等一会:

在setTimeout中延时了1秒钟,然后再去保存就可以了:

猜你喜欢

转载自blog.csdn.net/weixin_44786530/article/details/134990778