Ionic 4：无法向用户显示相机图像

Question

我只是想让用户拍照，将其存储为数据 URI，然后显示该图像。出于某种原因，这仅显示一个 boken 图像链接，我不确定我是否理解。 selectImage() 应该允许用户选择一张图片或拍摄一张新图片，然后显示该图片。

我的看法：

<ion-row *ngIf="imageSrc">
  <ion-col class="ion-text-center">
    <img alt="cropped photo" height="500px" [src]="imageSrc" />
    <p>{{imageSrc}}</p>
  </ion-col>
</ion-row>

组件：

selectImage() : void {
    this.photo.selectImageSheet().then(() => {
      if ( typeof(this.photo.imageSource) == 'number' ) {
        this.photo.pickImage(this.photo.imageSource).then(imageURI => {
          this.global.handleResponse(imageURI)
          this.imageSrc = imageURI
        })
      }
    })
  }

照片服务：

pickImage(sourceType: number) : Promise<any> {
    return new Promise((resolve, reject) => {
      this.selectImage(sourceType).then( imageURI => {
        resolve(imageURI)
      })
    })
  }

 selectImage(srcType : number = 1) : Promise<any> {

    let options: CameraOptions = {
      quality: 100,
      sourceType: srcType,
      targetWidth: 600,
      targetHeight: 1200,
      destinationType: this.camera.DestinationType.FILE_URI,
      correctOrientation: true,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    return new Promise(resolve => {
      this.camera.getPicture(options)
        .then((imageURI) => {

          this.imageData = imageURI;

          resolve(this.imageData)
        })
        .catch(err => this.globals.handleResponse(JSON.stringify(err)))
    })
  }

文档似乎很清楚，FILE_URI 应该能够设置为src，所以我真的不确定会出现什么问题......

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

Answer 1

有一种流行的方法可以解决这个问题，就是像这样转换文件：

    this.imageData = this.win.Ionic.WebView.convertFileSrc(imageURI);

它适用于照片和视频。这是原始回复https://stackoverflow.com/a/55934321/10243902

不过，我更喜欢立即将图像显示为 base64。如果您想使用它，只需安装 Base64 插件：

ionic cordova plugin add com-badrit-base64
npm install @ionic-native/base64

在构造函数上初始化

constructor(private base64: Base64 ){ }

并像这样使用它：

      this.base64.encodeFile(imageURI).then((base64Img) => {
          this.imageData = base64Img;
        })