uni-app canvasToTempFilePath 在uni.$on中无法正常执行 未报错误信息 也不进回调

uni-app canvasToTempFilePath 在uni.$on中无法正常执行 未报错误信息 也不进回调

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

HBuilderX类型：

正式

HBuilderX版本号：

3.2.16

手机系统：

Android

手机系统版本号：

Android 12

手机厂商：

华为

手机机型：

华为p30pro

页面类型：

vue

vue版本：

vue2

打包方式：

云端

示例代码：

<template>  
    <view class="content ">  
        <canvas class="canvas" id="canvas" canvasId="canvas"></canvas>  
        <text>当前按钮点击 正常进入canvasToTempFilePath回调 </text>  
        <button style="margin-top:50upx;" @tap="generateImg">生成图片</button>  
        <button style="margin-top:50upx;" @tap="toPage">进入第二个页面</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {};  
    },  
    onLoad() {  
        this.$nextTick(() => {  
            const ctx = uni.createCanvasContext('canvas', this);  
            ctx.setFontSize(30);  
            ctx.fillText('canvas', 50, 100);  
            ctx.draw();  
        });  

        uni.$on('generateImg',this.generateImg)  
    },  
    onUnload() {  
        uni.$off('generateImg')  
    },  
    methods: {  
        toPage(){  
            uni.navigateTo({  
                url:'/pages/page2/page2'  
            })  
        },  
        generateImg() {  
            console.log('执行方法')  
            uni.canvasToTempFilePath({  
                canvasId:'canvas',  
                complete(e) {  
                    console.log('成功失败都进来！')  
                }  
            })  
        }  
    }  
};  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  
.canvas {  
    width: 200px;  
    height: 200px;  
    border: 1px solid red;  
}  
</style>

操作步骤：

进入其他页面 通过 uni.emit触发事件 在 index 执行uni.canvasToTempFilePath

预期结果：

uni.canvasToTempFilePath({  
    canvasId:'canvas',  
    complete(e) {  
        console.log('成功失败都进来！')  
    }  
})
`

更多关于uni-app canvasToTempFilePath 在uni.$on中无法正常执行 未报错误信息 也不进回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

收到，这边排查下

更多关于uni-app canvasToTempFilePath 在uni.$on中无法正常执行 未报错误信息 也不进回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已上传附件

非活动页面 ，不支持 dom 相关操作

我的意思是 任何回调都没进入 如果不支持 那也得进错误回调报相关错误信息吧。

现在已经换了中方案实现了 用 h5+ 的 webview截屏api实现了

这是一个典型的异步执行上下文问题。在uni.$on事件监听器中调用uni.canvasToTempFilePath时，canvas的绘制可能尚未完成或上下文已丢失。

主要原因：

  1. canvas绘制异步性：canvas.draw()是异步操作，在页面跳转后通过事件触发时，canvas可能未准备好
  2. 页面生命周期：从其他页面触发事件时，原页面的canvas上下文可能处于非激活状态

解决方案：

方案1：确保canvas绘制完成

generateImg() {
    console.log('执行方法')
    // 重新绘制确保canvas上下文激活
    const ctx = uni.createCanvasContext('canvas', this);
    ctx.setFontSize(30);
    ctx.fillText('canvas', 50, 100);
    ctx.draw(true, () => {
        // 在draw回调中执行
        uni.canvasToTempFilePath({
            canvasId: 'canvas',
            success: (res) => {
                console.log('成功', res.tempFilePath)
            },
            fail: (err) => {
                console.log('失败', err)
            },
            complete: (e) => {
                console.log('complete回调')
            }
        }, this)
    })
}

方案2：使用setTimeout延迟执行

generateImg() {
    console.log('执行方法')
    setTimeout(() => {
        uni.canvasToTempFilePath({
            canvasId: 'canvas',
            success: (res) => {
                console.log('成功', res.tempFilePath)
            },
            fail: (err) => {
                console.log('失败', err)
            }
        }, this)
    }, 100)
}

方案3：检查页面显示状态

onShow() {
    // 页面显示时重新绑定事件
    uni.$on('generateImg', this.generateImg)
},
onHide() {
    // 页面隐藏时移除事件
    uni.$off('generateImg')
}
回到顶部