uni-app uni.canvasGetImageData没有回调

uni-app uni.canvasGetImageData没有回调

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 windows10
HBuilderX 正式
HBuilderX版本 3.1.8
手机系统 iOS
手机版本号 iOS 13.4
手机厂商 苹果
手机机型 iPhone 8 Plus
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

uni.canvasGetImageData({
canvasId: 'canvasGame',
x: 0,
y: 0,
width: this.SCREEN_WIDTH,
height: this.SCREEN_HEIGHT,
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(msg) {
console.log(msg);
}
})

操作步骤：

onload直接调用uni.canvasGetImageData

预期结果：

uni.canvasGetImageData回调结果

实际结果：

uni.canvasGetImageData没有回调结果

bug描述：

uni.canvasGetImageData三个回调方法都没有回调


更多关于uni-app uni.canvasGetImageData没有回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

如果是在自定义组件下使用，第二个参数传入自定义组件实例 this，以操作组件内 <canvas> 组件
uni.canvasGetImageData({
canvasId: ‘myCanvas’,
…
}, this); // 此处在自定义组件下使用时，需要传入当前自定义组件实例this

更多关于uni-app uni.canvasGetImageData没有回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，找到问题了，回调的success打印的res.data数据太大了，控制台打印卡住了，上个厕所回来就打印出来了。

这是一个典型的Canvas API调用时机问题。在onload中直接调用uni.canvasGetImageData时，Canvas可能尚未完成渲染，导致API无法正常执行回调。

解决方案：

  1. 使用setTimeout延迟执行
setTimeout(() => {
  uni.canvasGetImageData({
    canvasId: 'canvasGame',
    x: 0,
    y: 0,
    width: this.SCREEN_WIDTH,
    height: this.SCREEN_HEIGHT,
    success(res) {
      console.log('成功获取图像数据', res);
    },
    fail(err) {
      console.log('获取失败', err);
    }
  })
}, 100);
  1. 在Canvas绘制完成后调用 确保在Canvas完成内容绘制后再调用获取图像数据：
// 先绘制Canvas内容
const ctx = uni.createCanvasContext('canvasGame');
ctx.draw();
ctx.draw(false, () => {
  // 绘制完成后获取图像数据
  uni.canvasGetImageData({
    canvasId: 'canvasGame',
    // ...其他参数
    success(res) {
      console.log(res);
    }
  });
});
回到顶部