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

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
        }

return 您要查找的 base64 字符串。

现在您必须导入 angular 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 页面中

camera plugin captured image not showing in the html page

ionic3

angular4-forms