<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>
Absorbed66c
- 发布：2021-11-27 15:14
- 更新：2021-12-02 11:17
- 阅读：383
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.2.16
手机系统： Android
手机系统版本号： Android 12
手机厂商： 华为
手机机型： 华为p30pro
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
进入其他页面 通过 uni.emit触发事件 在 index 执行uni.canvasToTempFilePath
进入其他页面 通过 uni.emit触发事件 在 index 执行uni.canvasToTempFilePath
预期结果：
进入回调
uni.canvasToTempFilePath({
canvasId:'canvas',
complete(e) {
console.log('成功失败都进来！')
}
})
进入回调
uni.canvasToTempFilePath({
canvasId:'canvas',
complete(e) {
console.log('成功失败都进来！')
}
})实际结果：
为报异常 也不进回调
为报异常 也不进回调
bug描述：
canvasToTempFilePath 在uni.$on中无法正常执行 未报错误信息 也不进回调
