захваченное плагином камеры изображение не отображается на html-странице - PullRequest
Новая
       24

захваченное плагином камеры изображение не отображается на html-странице

0 голосов
/ 01 ноября 2018

Я работаю над 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.

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Вы сообщаете приложению, что вам нужен файл UR 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;">
0 голосов
/ 01 ноября 2018

замените img html tag tag, надеюсь, это сработает 

<img [src]="myphoto" />

до 

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