android - ionic native 相机拍照但不显示。我想拍照并在同一页面上显示

Question

我正在尝试 ion native camera api，当相机出现时，那是羚牛的照片，我可以点击一张图片，但图片没有显示

我正在使用 android oreo、ionic 3 和最新的 cordova，并在真实设备上运行应用

<-- file home.html-->`
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button round (click)="eventofClick()">Round Button</button>

  <p><img src="{{image}}" /> </p> 

{{image}}

</ion-content>
<--home.ts-- ------------------------------------------------------>

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 {
  image: any;

  constructor(public navCtrl: NavController, public camera: Camera) {
    console.log("constructor");

  }
eventofClick() {
    console.log("called");
    console.log('inside');
    const options: CameraOptions = {
quality: 100,
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):
   let base64Image = 'data:image/jpeg;base64,' + imageData;
  this.image = 'data:image/jpeg;base64,' + imageData;
  }, (err) => {
   // Handle error
  });
}
}

拍完照片我想展示一下我得到的输出是

在控制台我得到 1549019043619.jpg:1 GET unsafe:data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.catalyst.android.safra/cache/1549019043619.jpg 404(未找到)

Answer 1

试一试，这会返回一个图像的 FILE_URI。如果您正在将图像上传到服务器，请尝试在上传后显示来自您的服务器的图像。或者您可以直接使用 base 64 显示它。对于 Base64，您必须将 destinationType: this.camera.DestinationType.FILE_URI 更改为 destinationType: this.camera.DestinationType.DATA_URL 相机选项。上传图像并显示它。

takePhoto(){
      const options: CameraOptions = {
              quality: 80,
              destinationType: this.camera.DestinationType.FILE_URI,
              encodingType: this.camera.EncodingType.JPEG,
              mediaType: this.camera.MediaType.PICTURE,
              sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
            }
     this.camera.getPicture(options).then((imageData) => {
             // imageData is either a base64 encoded string or a file URI
             // If it's base64 (DATA_URL):
             console.log(imageData);
               this.imageUpload(imageData) / pass your URL in upload function
            }, (err) => {
             // Handle error
            });
    }


imageUpload(path) {
      const fileTransfer: FileTransferObject = this.transfer.create();
      let options: FileUploadOptions = {
          fileKey: 'image',
          fileName: '.png',
          chunkedMode: false,
          //mimeType: "image/jpeg",
        }
        fileTransfer.upload(path, 'Server_URL', options)
          .then((data) => {
          let res = JSON.parse(data.response);
          if (res.success == true) {
              //server will return you image name Push that name into an array and show it on your View
          }
        }, (err) => {
          console.log(err);
        });
    }