Question

我对Ionic有点麻烦。我试图让cordova相机插件工作：我能够打开图书馆，获取照片并裁剪它们。但是，我无法弄清楚如何将它们变成变量供以后使用，或者变成img源。这里有点我的代码：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular'; 

import { TranslateService } from '@ngx-translate/core';
import { ImagePicker } from '@ionic-native/image-picker';
import { AlertController } from 'ionic-angular';
import { Crop } from '@ionic-native/crop';
import { Camera } from '@ionic-native/camera'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public translate: 
TranslateService, private imagePicker: ImagePicker, private cropService: Crop) {
  }

  uploadPhoto(){
    let options= {
      maximumImagesCount: 4,
    }
    this.photos = [new Array<string>()];
    this.imagePicker.getPictures(options)
    .then((results) => {
      this.reduceImages(results).then(() => {
        console.log('all images cropped!!');
      });
    }, (err) => { console.log(err) });
  }

reduceImages(selected_pictures: any) : any{
    return selected_pictures.reduce((promise:any, item:any) => {
      return promise.then((result) => {
        return this.cropService.crop(item, {quality: 75})
                .then(cropped_image => this.photos.push(cropped_image));
      });
    }, Promise.resolve());
  }
}

然后是我的ngModules中的提供者：

providers: [
StatusBar,
ImagePicker,
Camera,
Crop,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

最后是一些HTML：

   <ion-header>
    <ion-toolbar color="primary">
      <ion-title>
        Images
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content padding>
      <button (click)='uploadPhoto()' style="background-color: #000; color: 
    white; padding: 1em">Upload photo (on simulator only)</button>
      <br>
    <ion-card *ngFor="let photo of photos">
      <img src="{{photo}}" />
    </ion-card>

  </ion-content>

Cordova相机插件与Ionic 3一起使用

0 个答案: