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

蔚落 2024-02-05 15:15 14阅读 0赞

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

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

![8c0294b0babb49b1ac9e02907c39d764.png][]

> 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事件中使用的：

![9360b1dc64504dcf8dcfa968fe3aa01c.png][]

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

![b81be6189b114023b91ba719e0b8f964.png][]

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

![e4f04c00b43e4133b0142fe586b13658.png][]

[uniapp_uviewPlus_vue3_ts_pinia_vite_echarts _-CSDN]: https://blog.csdn.net/weixin_44786530/article/details/134333070?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22134333070%22%2C%22source%22%3A%22weixin_44786530%22%7D
[8c0294b0babb49b1ac9e02907c39d764.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/98747ee3099c48f5bed4769b49f85df0.png
[9360b1dc64504dcf8dcfa968fe3aa01c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/3c85bff1a60548cdb77344e67075499d.png
[b81be6189b114023b91ba719e0b8f964.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/2f9c62e9ef694ece85fa1fb7efdcc968.png
[e4f04c00b43e4133b0142fe586b13658.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/276e1e6aa66d4adba6b669e51a7ee7f8.png