Question

这是编码takephoto()函数的Home.ts文件，我确实从ionic-native / camera导入了照相机和照相机选项，如下所示：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  myphoto: any;
  constructor(public navCtrl: NavController, private camera:Camera) {

  }

  takePhoto(){
    const options: CameraOptions = {
      quality: 70,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64 (DATA_URL):
     this.myphoto = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
     // Handle error
    });
  }

}

这是我的 Home.html 文件：

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>

  <button ion-button (click)="takePhoto()"> Take Photo </button>

  <p align ="center"><img src="{{ myphoto }}"></p>
</ion-content>

一旦我在Android设备上点击图片，它就不会在home.html上显示最终结果。任何人都可以告诉引起此问题的原因。

我将屏幕截图附在下面： this is the image that I took after clicking the take photo button

As you can see through this image that the final image doesn't show up on the page

Answer 1

您无需在imageData之前加上'data:image/jpeg;base64,'

关于通过Android设备在应用程序上显示单击的图像的问题

1 个答案: