Android/Ionic环境下调用相机后Canvas无法更新问题排查

这个问题我做Ionic项目时也碰到过，核心原因是Cordova Camera插件的异步回调不在Angular的变更检测上下文里，导致Canvas的更新没被Angular识别到。

具体来说：

• camera.getPicture是原生插件的异步操作，它的回调函数运行在Angular的NgZone之外。Angular靠NgZone跟踪所有异步操作（比如setTimeout、HTTP请求），然后自动触发变更检测更新视图。你直接在这个回调里调用updateCanvas()，Angular根本不知道有这个操作，所以Canvas自然不会刷新。
• 而你调用presentAlert后能正常显示，是因为Ionic的Alert组件内部已经把操作包裹在了NgZone里，触发了变更检测，所以后续的updateCanvas()就能让Canvas正确渲染了。

两种可行的解决办法 #

1. 用NgZone包裹Canvas更新逻辑 #

把updateCanvas()和相关的状态更新放在this.ngZone.run()里，强制让操作进入Angular的变更检测上下文：

this.camera.getPicture(options).then((imageData) => {
  this.filePath.resolveNativePath(imageData)
    .then((path) => {
      let imagePath = path.substr(0, path.lastIndexOf("/") + 1);
      let imageName = path.substring(path.lastIndexOf("/") + 1, path.length);
      this.file.moveFile(imagePath, imageName, this.file.dataDirectory, fileName)
        .then(newFile => {
          // 把所有需要触发视图更新的操作都放进ngZone.run里
          this.ngZone.run(() => {
            this.info = "Tap 'Upload' to upload photo";
            this.db.addOrUpdatePhoto(this.photo).then(() => {
              this.updateCanvas();
            });
          });
        })
        .catch(err => {
          console.log("openCamera: ", err);
        })
    })
    .catch((err) => {
      console.log("openCamera: ", err);
    })
})

2. 手动触发变更检测 #

如果不想用NgZone，可以注入ChangeDetectorRef，在Canvas绘制完成后手动通知Angular更新视图：

首先在组件的构造函数里注入依赖：

constructor(
  private cdr: ChangeDetectorRef,
  // 其他你的依赖，比如ngZone、camera、file等
) {}

然后修改你的updateCanvas方法，在绘制完成后添加手动检测：

updateCanvas() {
  // 这里是你的Canvas绘制逻辑，比如：
  const canvas = document.getElementById('your-canvas-id') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = this.file.dataDirectory + this.photo.id + '.jpg';
  
  img.onload = () => {
    // 缩放图片并绘制到Canvas
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    // 手动触发变更检测
    this.cdr.detectChanges();
  };
}

额外提醒 #

• 确保你的图片加载是异步完成的！一定要在img.onload回调里执行Canvas绘制，不然图片还没加载完就调用drawImage，Canvas还是空的。
• 针对cordova-plugin-ionic-webview 4.1.1，你用this.file.dataDirectory存储的图片路径，WebView是可以直接访问的，不用额外转换路径格式，这点放心用就行。

内容的提问来源于stack exchange，提问作者lepton