uni-app canvasToTempFilePath使用uni小程序时fail提示canvas is empty，而wx小程序则正常

uni-app canvasToTempFilePath使用uni小程序时fail提示canvas is empty，而wx小程序则正常

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
## 示例代码：

```javascript
uni.canvasToTempFilePath({  
    canvasId:this.id,  
    success:(e)=>{
        console.log(e)  
    },  
    fail:(e)=>{
        console.log(e)  
    }  
},this)

操作步骤：

uni.canvasToTempFilePath({  
    canvasId:this.id,  
    success:(e)=>{
        console.log(e)  
    },  
    fail:(e)=>{
        console.log(e)  
    }  
},this)

预期结果：

返回正常

实际结果：

fail canvas is empty

bug描述：

编译到微信小程序

vue3 在组件中使用 uni.canvasToTempFilePath 时，报错 fail: canvas is empty

同样情况下直接使用 wx.canvasToTempFilePath ，符合预期

Releases v3.2.12 Alpha v3.2.14,这两个版本都有同样问题

canvasToImageDemo.zip

相关链接：


更多关于uni-app canvasToTempFilePath使用uni小程序时fail提示canvas is empty，而wx小程序则正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

canvas-id是否存在? 注意：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。

更多关于uni-app canvasToTempFilePath使用uni小程序时fail提示canvas is empty，而wx小程序则正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


存在的，而且只有一个canvas,所在行如下： <canvas @longpress=“lp” :canvas-id=“id” :id=“id”/ >

回复 c***@163.com: 是微信小程序吗？可提供一个简单可复现的示例（上传附件），方便我们排查哦

回复 DCloud_UNI_Anne: 附件已添加，问题也找到了是vue3+组件会出现，非组件或者非vue3不会出现

回复 c***@163.com: 温馨提示：反馈bug时注意正确选择vue版本以及相关平台信息，方便快速定位问题

问题已确认，后续优化，已加分，感谢您的反馈！

请问何时优化完成

//昨晚也碰到这个 canvas is empty 的问题，读到某篇文章后解决的。希望能帮到后面的人 //以下是代码 const context = uni.createCanvasContext(‘canvas1’, this);
var picBGUrl = ‘http://…’;
uni.getImageInfo({
src: picBGUrl,
success: function(res) {
//背景
context.drawImage(res.path,0,0,300,400);
context.save();
//写字
context.setFontSize(16);
context.setFillStyle("#111111");
context.fillText(‘write words’,58,107);
context.save();
//这边是关键！！！
context.draw(true,()=>{
uni.canvasToTempFilePath({
canvasId: ‘canvas1’,
success: function(res) {
_this.tempImg = res.tempFilePath;
console.log(“Canvas:”+res.tempFilePath)
},
fail: function(res) {
console.log(“fail!!!”+JSON.stringify(res));
}
});
});
}
});

太对了老哥，ctx.draw(true,()=>{ })这个是关键

alpha 3.3.0 已修复

遇到同样的问题

这个问题是由于uni-app在微信小程序平台上的canvas组件渲染时机差异导致的。在uni-app中，canvas的渲染可能比原生微信小程序稍晚，导致调用canvasToTempFilePath时canvas内容尚未绘制完成。

解决方案：

  1. 使用setTimeout延迟执行（推荐）：
setTimeout(() => {
    uni.canvasToTempFilePath({
        canvasId: this.id,
        success: (e) => {
            console.log(e)
        },
        fail: (e) => {
            console.log(e)
        }
    }, this)
}, 300)  // 适当延迟，确保canvas已渲染
  1. 在canvas绘制完成后调用： 确保在canvas的@ready事件触发后再调用转换方法：
<canvas :canvas-id="id" @ready="onCanvasReady"></canvas>

onCanvasReady() {
    // 在这里执行canvas绘制操作
    // 绘制完成后再调用canvasToTempFilePath
    uni.canvasToTempFilePath({
        canvasId: this.id,
        success: (e) => {
            console.log(e)
        }
    }, this)
}
  1. 使用Promise封装：
const canvasToImage = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            uni.canvasToTempFilePath({
                canvasId: this.id,
                success: resolve,
                fail: reject
            }, this)
        }, 300)
    })
}
回到顶部