ionic-framework - 使用相机后画布不更新（Android / Ionic）

问题描述

我正在尝试将缩放的照片绘制到画布上。但是，在我使用相机对象拍照后，画布不会更新。这是我的相机代码：

public openCamera() {
    // do we have permission to access the camera?
    this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
      result => console.log('openCamera > has camera permission: ', result.hasPermission),
      err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
    );
    this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.androidPermissions.PERMISSION.GET_ACCOUNTS]);
    const options: CameraOptions = {
      quality: 100,
      correctOrientation: true,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    let file_ext: string = null;
    if (options.encodingType == EncodingType.JPEG) {
      file_ext = "jpg";
      console.log("openCamera > file_ext: ", file_ext);
    }
    else if (options.encodingType == EncodingType.PNG) {
      file_ext = "png";
      console.log("openCamera > file_ext: ", file_ext);
    }
    else {
      this.presentAlert("Warning", "Unsupported image encoding type.");
      return;
    }

    // photo already taken?
    if (this.photo == null) {
      this.photo = new Photo();
      this.photo.id = Guid.create().toString();
      this.photo.file_extension = file_ext;
    }

    // image filename: image_id.jpg
    const dt: Date = new Date();
    let dt_day: string = dt.getDate().toString();
    dt_day = dt_day.length == 1 ? "0" + dt_day : dt_day;
    let dt_month: string = (dt.getMonth() + 1).toString();
    dt_month = dt_month.length == 1 ? "0" + dt_month : dt_month;

    const dt_string: string = dt_day + "/" + 
                              dt_month + "/" + 
                              dt.getFullYear() + ", " + 
                              dt.getHours() + ":" + 
                              dt.getMinutes() + ":" + 
                              dt.getSeconds() + "." + 
                              dt.getMilliseconds();

    if (this.photo.id == null || this.photo.id == '' || this.photo.id.length == 0) {
      this.presentAlert("Error", "image id not set");
      return;
    }
    else if (this.user.id == null || this.user.id == Guid.EMPTY || this.user.id == '' || this.user.id.length == 0) {
      this.presentAlert("Error", "user.id not set");
      return;
    }
    else if (dt_string == null || dt_string == '' || dt_string.length == 0) {
      this.presentAlert("Error", "dt_string not set");
      return;
    }

    this.photo.taken = dt_string;
    const fileName: string = this.photo.id + ".jpg";
    this.camera.getPicture(options).then((imageData) => {
      // delete previous image
      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 => {             
          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);
      })
    })
    .catch((err) => {
        console.log("openCamera: ", err);
    });
}

在调试这个的过程中，我写了一个方法来检查相机保存图像后照片是否真的存在：

public exists() {
    try {
      this.file.listDir(this.file.dataDirectory, '')
      .then(files => {
        for (let i = 0; i < files.length; i++) {
          if (files[i].name.includes(this.photo.id)) {
            files[i].getMetadata((metadata) => {
               this.presentAlert("image found", "filename: " + files[i].name + ", size: " + metadata.size + " bytes")
              .then(() => this.updateCanvas());
            });
          }
        }
      });
    }
    catch { }
}

我注意到在调用 updateCanvas 之前显示离子警报会导致照片正确显示在画布上。有谁知道这里可能是什么问题？

另外，不确定是否相关，但我使用的是cordova-plugin-ionic-webview 4.1.1

标签： ionic-frameworkcanvas

ionic-framework - 使用相机后画布不更新（Android / Ionic）

问题描述

解决方案

推荐阅读