uni.canvasToTempFilePath在app正常，微信小程序报错: fail canvas is empty

最新推荐文章于 2025-02-28 14:11:33 发布

webuni

最新推荐文章于 2025-02-28 14:11:33 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签：微信小程序前端

本文链接：https://blog.youkuaiyun.com/webuni/article/details/128410011

在微信小程序中遇到uni.canvasToTempFilePath方法生成图片临时路径失败，错误信息为failcanvasisempty。问题关键在于自定义组件下，需正确指定canvasId及组件实例。解决方案是使用uni.createCanvasContext创建画布上下文，并在uni.canvasToTempFilePath中传入对应的canvasId。通过此方法，可以成功获取到canvas内容的临时文件路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述:

在微信小程序使用uni.canvasToTempFilePath,画布可以画出图像，但是生成图片临时路径报错:fail canvas is empty 。

问题分析：

uni.canvasToTempFilePath(object, component)，在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。

解决方案：

const ctx = uni.createCanvasContext('自己定义的canvas id', this);

        uni.canvasToTempFilePath({
                       canvasId: '自己定义的canvas id'
                       complete: res => {
console.log(res.tempFilePath) //相对路径
                       }
                   }, this)

注意：红色字体是重点

补充：自己遇到的问题记录一下，可供大家选择性参考