Question

我正在开发ionic 3移动应用程序，我想在其中使用相机拍摄照片。我已经安装了相机插件。以下是html代码：

<ion-content padding>

    The world is your oyster.    

    <button ion-button (click)="capture_image()">Capture Image</button>
    <p align="center">
        <img src="{{myphoto}}" />
    </p>

</ion-content>

以下是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 {

    myphoto:any;

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

    }

    capture_image(){
        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.myphoto = 'data:image/jpeg;base64,' + imageData;
        }, (err) => {
            // Handle error
        });
    }
}

我捕获的图像未显示在HTML页中。

Answer 1

请替换img html标记行，我希望这行得通

<img [src]="myphoto" />

到

<img src="{{myphoto}}" />

Answer 2

您通过以下方式告诉应用您要使用fileURI file:///storage/sdcard0/Android/data/io.ionic.starter/cache/1541142956953.jpg而不是base64字符串：

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

因此将其更改为：

const options: CameraOptions = {
            quality: 100,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE
        }

这将返回您要查找的base64字符串。

现在，您必须导入有角度的DomSanitizer来解决不安全的资源错误。

import {DomSanitizer}                      from '@angular/platform-browser';
...

constructor(private DomSanitizer: DomSanitizer){}



sanatizeBase64Image(image) {
    if(image) {
      return this.DomSanitizer.bypassSecurityTrustResourceUrl(image);
    }
  }

然后在您的page.html

<img [src]="sanatizeBase64Image(myphoto)" onError="this.onError=null;">

相机插件捕获的图像未显示在html页面中

2 个答案: