使用cordova-plugin-camera显示图像

Question

我在我的Ionic 2应用程序中使用cordova-plugin-camera.我可以成功拍摄照片,然后提醒selfieImage的值 - 这显示了我的数据:image/jpeg; base64,然后是我的图像的base64编码版本 - 很棒

takeRegistrationSelfie() {

    Camera.getPicture({
        destinationType: Camera.DestinationType.DATA_URL,
        targetWidth: 1000,
        targetHeight: 1000,
        correctOrientation: true,
        cameraDirection: 1        
    }).then((imageData) => {
      // imageData is a base64 encoded string
        this.selfieImage = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });    

}

在我的模板中,我有

<img [src]="selfieImage" *ngIf="selfieImage" />

此时定义了selfieImage,但我的图像是空的 - 10 x 10像素,灰色边框,没有图像.

稍后在我的应用程序中,我将带有图像的ajax请求发送到我的后端 - 这样工作正常,图像被正确接收.

为什么图像不会显示在我的模板中？

Answer 1

我发现我需要使用DomSanitizer.有了这个,那么图像就可以了.

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

在我的构造函数中,我有......

private DomSanitizer: DomSanitizer

然后在我的模板中......

<img [src]="DomSanitizer.bypassSecurityTrustUrl(selfieImage)" class="registerImage" *ngIf="selfieImage" />

瞧,它有效:-)

编辑.我被要求提供完整版的代码.我将在下面添加它.

register.ts

import { Component } from '@angular/core';
import { NavController, Platform, LoadingController } from 'ionic-angular';
import { Auth, FacebookAuth, User, UserDetails, IDetailedError } from '@ionic/cloud-angular';
import { DashboardPage } from '../dashboard/dashboard';
import { Http } from '@angular/http';
import { URLSearchParams } from "@angular/http"
import { Headers } from '@angular/http';
import { Camera } from 'ionic-native';
import { DomSanitizer } from '@angular/platform-browser';
import 'rxjs/add/operator/map';

/*
  Generated class for the Register page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-register',
  templateUrl: 'register.html'
})
export class RegisterPage {

  public registerStep: number;

  /* step 0 */
  public candidateFirstName: string;    
  public candidateLastName: string; 
  public candidateDOB: string;
  public candidatePhone: string;  
  public candidateGender: string;    

  /* step 1 */
  public lookupPostcode: string;
  public lookupAddresses: any;
  public addressSelected: boolean = false;

  public candidateAddress1: string;  
  public candidateAddress2: string;  
  public candidateTown: string;  
  public candidatePostcode: string;        

  /* step 2 */  
  public selfieImage: string;   

  /* step 3 */    
  public passportImage: string; 

  public registerResponse: any = {};

  constructor(public platform: Platform, public navCtrl: NavController, public http: Http, public user: User, public auth:Auth, public loadingCtrl: LoadingController, private DomSanitizer: DomSanitizer) {
    this.registerStep = 0;
  }

  doRegistration(step) {

    if(step == 1) {
      this.registerStep = 1;    
    }
    else if(step == 2) {
      this.registerStep = 2;  
    }  
    else if(step == 3) {
      this.registerStep = 3;    
    }  
    else if(step == 4) {
      this.registerStep = 4;    
    }  
    else if(step == 5) {

      var headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');  

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('action', 'register');
    urlSearchParams.append('candidateFirstName', this.candidateFirstName);
    urlSearchParams.append('candidateLastName', this.candidateLastName);  
    urlSearchParams.append('candidateDOB', this.candidateDOB);      
    urlSearchParams.append('candidatePhone', this.candidatePhone);  
    urlSearchParams.append('candidateGender', this.candidateGender);                    

    urlSearchParams.append('candidateAddress1', this.candidateAddress1);    
    urlSearchParams.append('candidateAddress2', this.candidateAddress2);    
    urlSearchParams.append('candidateTown', this.candidateTown);    
    urlSearchParams.append('candidatePostcode', this.candidatePostcode);

    urlSearchParams.append('selfieImage', encodeURIComponent(this.selfieImage));
    urlSearchParams.append('passportImage', encodeURIComponent(this.passportImage));                                        

    urlSearchParams.append('candidateHash', this.user.id);
    let body = urlSearchParams.toString()

      this.http.post('http://www.example.com/api/index.php', body, {headers:headers}).subscribe(data => {
        this.registerResponse = data;
        this.user.set('candidateID', this.registerResponse.candidateID);
        this.user.set('candidateDetailsSubmitted', 1);        
        this.user.save();           
          this.navCtrl.setRoot(DashboardPage);
      }); 

    }         

  } 


  takeRegistrationSelfie() {

    Camera.getPicture({
        destinationType: Camera.DestinationType.DATA_URL,
        targetWidth: 1000,
        targetHeight: 1000,
        correctOrientation: true,
        cameraDirection: 1        
    }).then((imageData) => {
    this.selfieImage = "data:image/jpeg;base64," + imageData;     
    }, (err) => {
        console.log(err);
    });    

  }

  chooseRegistrationSelfie() {

    Camera.getPicture({
        destinationType: Camera.DestinationType.DATA_URL,
        targetWidth: 1000,
        targetHeight: 1000,
        correctOrientation: true,
        cameraDirection: 1,
        sourceType: 0,
        mediaType: 0     
    }).then((imageData) => {
        this.selfieImage = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });    

  }  

  takeRegistrationPassport() {

    Camera.getPicture({
        destinationType: Camera.DestinationType.DATA_URL,
        targetWidth: 1000,
        targetHeight: 1000,
        correctOrientation: true      
    }).then((imageData) => {
        this.passportImage = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });    

  } 

  chooseRegistrationPassport() {

    Camera.getPicture({
        destinationType: Camera.DestinationType.DATA_URL,
        targetWidth: 1000,
        targetHeight: 1000,
        correctOrientation: true,
        sourceType: 0,
        mediaType: 0                 
    }).then((imageData) => {
        this.passportImage = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });    

  }   

  lookupButton() {

  let loading = this.loadingCtrl.create({
    spinner: 'bubbles',
    content: 'Looking up address ...',
    duration: 5000
  });

    loading.present();

    let postcode = this.lookupPostcode.replace(/\W/g, '');

  this.http.get('https://api.getAddress.io/v2/uk/'+postcode+'?api-key=KEY&format=true').map(res => res.json().Addresses).subscribe(data => {
    this.lookupAddresses = data;
    loading.dismiss();
  }); 

  } 

  setAddress(address1, address2, town) {
    this.candidateAddress1 = address1;
    this.candidateAddress2 = address2;  
    this.candidateTown = town;
    this.candidatePostcode = this.lookupPostcode;
    this.addressSelected = true;
  }

  ionViewDidLoad() {
    console.log('Hello RegisterPage Page');
  }

}

register.html

<!--
  Generated template for the Register page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Complete registration</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="login-special">

    <div *ngIf="registerStep == 0 ">

        <ion-list>
            <ion-item>
                <ion-label floating>Your first name</ion-label>
                <ion-input [(ngModel)]="candidateFirstName" type="text" value=""></ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating>Your last name</ion-label>
                <ion-input [(ngModel)]="candidateLastName" type="text" value=""></ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating>Your telephone number</ion-label>
                <ion-input [(ngModel)]="candidatePhone" type="tel" value=""></ion-input>
            </ion-item> 

            <ion-item>
                <ion-label floating>Your date of birth</ion-label>
                <ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="candidateDOB"></ion-datetime>
            </ion-item> 
            <br />
            <ion-label class="gender-select-title">Choose your gender</ion-label>
            <ion-list radio-group [(ngModel)]="candidateGender" class="two-col-selector">
                <ion-item>
                    <ion-label>Male</ion-label>
                    <ion-radio value="1"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>Female</ion-label>
                    <ion-radio value="2"></ion-radio>
                </ion-item>

            </ion-list>                           

        </ion-list>

        <div>

          <button [disabled]="!candidateFirstName || !candidateLastName || !candidatePhone || !candidateDOB || !candidateGender" ion-button color="primary" full (click)="doRegistration(1)">
            Next step
          </button>

        </div>  

    </div>

    <div *ngIf="registerStep == 1 ">

        <ion-list>
            <ion-item *ngIf="!addressSelected" class="address-finder">
                <ion-label floating>Enter Postcode</ion-label>
                <ion-input [(ngModel)]="lookupPostcode" type="text" value=""></ion-input>
            </ion-item>
            <button *ngIf="!addressSelected" ion-button class="button find-address" (click)="lookupButton()">FIND YOUR ADDRESS</button>

            <div *ngIf="!addressSelected">

                <p *ngIf="lookupAddresses?.length > 0">Select your address from the list below</p>

                <div *ngFor="let a of lookupAddresses" class="address-list">
                    <div (click)="setAddress(a[0], a[1], a[3])" class="address-item">{{ a[0] }}</div>
                </div>          

                <a class="text-link" (click)="setAddress('', '', '')">Address not found? Click here.</a>    

            </div>  

            <div *ngIf="addressSelected">               

                <ion-item>
                    <ion-label floating>Address line 1</ion-label>
                    <ion-input [(ngModel)]="candidateAddress1" type="text" value=""></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Address line 2</ion-label>
                    <ion-input [(ngModel)]="candidateAddress2" type="text" value=""></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Town</ion-label>
                    <ion-input [(ngModel)]="candidateTown" type="email" value=""></ion-input>
                </ion-item> 

                <ion-item>
                    <ion-label floating>Postcode</ion-label>
                    <ion-input [(ngModel)]="candidatePostcode" type="text" value=""></ion-input>
                </ion-item>

            </div>

        </ion-list>

        <div>

          <button *ngIf="addressSelected" [disabled]="!candidateAddress1 || !candidateTown || !candidatePostcode" ion-button color="primary" full (click)="doRegistration(2)">
            Next step
          </button>

        </div>  

    </div>  

    <div *ngIf="registerStep == 2 ">

        <div *ngIf="selfieImage == null">

                <h1>Add a selfie of yourself</h1>
                <p class="body-text">We need to see a picture of you to help us verify your identity. It won't be public and only our computer will see it.</p>

                <div class="selfie-placeholder ion-ios-person"></div>

                <div class="button-container">
                    <button ion-button color="primary" full (click)="takeRegistrationSelfie()">
                        Take a selfie
                    </button>       

                    <button ion-button color="primary" full (click)="chooseRegistrationSelfie()">
                        Choose a selfie
                    </button>                       
                </div>
        </div>

        <div *ngIf="selfieImage">

            <img [src]="DomSanitizer.bypassSecurityTrustUrl(selfieImage)" class="registerImage" *ngIf="selfieImage" />

            <div class="button-container">
                <button ion-button color="light" full (click)="takeRegistrationSelfie()">
                    Take it again?
                </button>               

                <button ion-button color="light" full (click)="chooseRegistrationSelfie()">
                    Choose another?
                </button>               
            </div>
                <button ion-button color="secondary" full (click)="doRegistration(3)" class="next-step-btn">
                    Happy? Next step
                </button>
        </div>  

    </div>  

    <div *ngIf="registerStep == 3 ">

        <div *ngIf="passportImage == null">

            <h1>Add a passport photo</h1>
                <p class="body-text">We need proof that you have the right to work in the UK. A picture of your passport is enough for now.</p>

            <div class="button-container">
                <button ion-button color="primary" full (click)="takeRegistrationPassport()">
                    Take a photo
                </button>       

                <button ion-button color="primary" full (click)="chooseRegistrationPassport()">
                    Choose a photo
                </button>                       
            </div>
        </div>

        <div *ngIf="passportImage">

            <img [src]="DomSanitizer.bypassSecurityTrustUrl(passportImage)" class="registerImage" *ngIf="passportImage" />

            <div class="button-container">
                  <button ion-button color="light" full (click)="takeRegistrationPassport()">
                    Take it again?
                  </button>             

                  <button ion-button color="light" full (click)="chooseRegistrationPassport()">
                    Choose another?
                  </button>             

            </div>  
            <button ion-button color="secondary" full (click)="doRegistration(4)">
                    Happy? Next step
                  </button> 

        </div>          

    </div>

    <div *ngIf="registerStep == 4 ">

        <h3>The legal bit</h3>

        <div class="scrollable">
            <h4>Terms and Conditions</h4>
            <p>1. Lorem ipsum dolor</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat mi in justo mollis faucibus. Proin eu sollicitudin nibh. Quisque blandit pulvinar nisl, vitae aliquet metus vulputate eget. Cras ac sagittis enim. Fusce mattis, ante ac tempus auctor, lacus lectus dignissim dui, eu venenatis tellus mi a ante. Proin blandit diam mauris, eu vestibulum sapien ullamcorper eget. Integer blandit a risus ut interdum. Cras neque urna, tempor ullamcorper placerat feugiat, mollis eu dolor.</p>
            <p>Proin eget consectetur ligula. Quisque fringilla eu est in rhoncus. In sollicitudin est nec ligula euismod, a euismod nulla vehicula. Vestibulum non vestibulum lorem, ac pharetra nisl. Donec erat nibh, dignissim vulputate dictum a, aliquet in leo. Maecenas facilisis sem vel est cursus, sagittis rutrum massa blandit. Vestibulum faucibus enim vel lorem auctor bibendum. Proin at mi lorem. </p>
        </div>

        <ion-item>
            <ion-label>I&rsquo;ve read and accept the Terms</ion-label>
            <ion-checkbox [(ngModel)]="acceptTerms" color="default" checked="false"></ion-checkbox>
        </ion-item>

        <ion-item>
            <ion-label>I&rsquo;ve submitted <strong>only</strong> my own ID</ion-label>
            <ion-checkbox [(ngModel)]="ownID" color="default" checked="false"></ion-checkbox>
        </ion-item>

        <button [disabled]="!acceptTerms || !ownID" margin-top ion-button color="secondary" full (click)="doRegistration(5)">
            Complete sign up
        </button>       

    </div>              

</ion-content>