Question

我正在尝试使用离子本机摄像头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>

</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 (Not Found)

Answer 1

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

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);
        });
    }

离子本机拍照但不显示照片。我想拍照并在同一页面上显示

1 个答案: