uni-app 移动端 uni.canvasToTempFilePath() 不会进入回调

uni-app 移动端 uni.canvasToTempFilePath() 不会进入回调

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win7
HBuilderX 正式
HBuilderX版本 3.2.16
手机系统 Android
手机版本号 Android 8.1
手机厂商 魅族
手机机型 16th
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

uni.canvasToTempFilePath({  
    x: 0,  
    y: 0,  
    width: 170,  
    height: 300,  
    destWidth: 170,  
    destHeight: 300,  
    canvasId: id,  
    success(res) {  
        console.log(res.tempFilePath)  
    },  
    fail(res) {  
        console.log(res)  
    },  
    complete(res){  
        console.log(res)  
    }  
})
```

### 预期结果：
和网页端一样

### 实际结果：
所有回调都不会进入

### bug描述：
uni.canvasToTempFilePath()在网页端可以正常进入回调，但是在移动端所有回调都不会进入

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211129/27128b415f9b903f5c65f89b4d0b8c07.png)

### 相关链接：
- [https://ask.dcloud.net.cn/question/139232](https://ask.dcloud.net.cn/question/139232)

更多关于uni-app 移动端 uni.canvasToTempFilePath() 不会进入回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

nvue 暂不支持此API nvue 如何使用 Canvas 请参考 https://github.com/dcloudio/NvueCanvasDemo

更多关于uni-app 移动端 uni.canvasToTempFilePath() 不会进入回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue页面中使用uni.canvasToTempFilePath()确实存在一些特殊注意事项。根据您描述的情况，可能是以下几个原因导致的：

  1. nvue页面中canvas组件需要使用weex渲染模式，确保canvas的type属性设置为"2d"或"web"

  2. 在Android平台上，确保canvas已经完成渲染后再调用转换方法，可以尝试加setTimeout延迟执行

  3. 检查canvasId是否正确绑定到canvas组件上，nvue中可能需要使用ref而非id

  4. 确认canvas的宽高设置有效，建议使用px单位

建议修改代码如下：

setTimeout(() => {
    uni.canvasToTempFilePath({
        canvasId: 'yourCanvasId', // 确保与canvas组件的id一致
        success(res) {
            console.log('转换成功', res.tempFilePath);
        },
        fail(err) {
            console.log('转换失败', err);
        }
    }, this);
}, 300);
回到顶部