APP拍照与图片预览

安装插件：

import { Camera, Transfer } from 'ionic-native';

TS代码：

images_list: any[] = []; //照片集合

   /**弹出获取图片样式 是从相机拍摄还是从相册获取 */
   getPhoen() {
     this.invoicePhoto = true;
     let actionSheet = this.actionSheetCtrl.create({
      title: '发票照片',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: '图片依据',
          icon: !this.platform.is('ios') ? 'images' : null,
          handler: () => {
            this.actionSheetCtrl.create({
              title: '发票照片',
              cssClass: 'action-sheets-basic-page',
              buttons: [
                {
                  text: '拍照',
                  icon: !this.platform.is('ios') ? 'images' : null,
                  handler: () => {
                    this.getPicture(2);
                  }
                },
                {
                  text: '相册选择',
                  icon: !this.platform.is('ios') ? 'images' : null,
                  handler: () => {
                    this.getPicture(1);
                  }
                }]
            }).present();

            let alert = this.alertCtrl.create();
            alert.setTitle('选择取证方式');

            alert.addInput({
              type: 'radio',
              label: '拍照',
              value: '0',
              checked: false
            });
            alert.addInput({
              type: 'radio',
              label: '相册选择',
              value: '1',
              checked: true
            });

            alert.addButton('取消');
            alert.addButton({
              text: '确定',
              handler: data => {
                if (data == 0) {
                  this.getPicture(2);
                } else {
                  this.getPicture(1);
                }
              }
            });
            console.log('Destructive clicked');
          }
        },
        {
          text: '取消',
          role: 'cancel',
          icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    }); 
    actionSheet.present();
  }


/**具体调用*/
  getPicture(selection: any) {
    var options: any;
    if (selection == 1) {
      options = {
        quality: 100,
        maximumImagesCount: 5,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 1000,
        targetHeight: 1000,
        mediaType: Camera.MediaType.PICTURE,
        saveToPhotoAlbum: false,
        correctOrientation: true
      };
    } else {
      options = {
        quality: 75,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE,
        targetWidth: 1000,
        targetHeight: 1000,
        saveToPhotoAlbum: true,
        correctOrientation: true
      };
    }

    Camera.getPicture(options).then((imageData) => {
      var img = '';
      if (imageData.lastIndexOf('?') != -1) {
        img = imageData.substring(0, imageData.lastIndexOf('?'));
      } else {
        img = imageData;
      }
      let v = {
        src: imageData,
        path: img,
        name: img.substring(img.lastIndexOf('/') + 1),
        type: img.substring(img.lastIndexOf('.') + 1),
        fileType: 'IMAGE',
        takeTime: Utils.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss'),
        takeUserName: GLOBAL_CONST.USER_INFO['userName'],
        takeLongitude: this.lng,
        takeLatitude: this.lat
      }
        this.images_list.push(v)

    }, (err) => {
      Toast.show(err', '2000', 'center').subscribe();
    });
  }


/**图片预览*/
  viewImages(index) {
    this.alertCtrl.create({
      title: '选项',
      buttons: [{
        text: '修改',
        handler: data => {
          this.alertCtrl.create({
            title: '修改文件名',
            inputs: [{
              type: 'text',
              name: 'fileName',
              value: this.images_list[index].name,
            }],
            buttons: [
              {
                text: '取消',
              }, {
                text: '确认',
                handler: data => {
                  let n = this.images_list[index].name;
                  let s = n.lastIndexOf('.');
                  let e = n.length;
                  let ext = n.substring(s, e);

                  if (data.fileName.lastIndexOf(ext) != -1) {
                    this.images_list[index].name = data.fileName
                  } else {
                    this.images_list[index].name = data.fileName + ext
                  }
                }
              }]
          }).present();

        }
      }, {
        text: '预览',
        handler: data => {
          let modal = this.modalCtrl.create("ImagePopoverPage", { initialSlide: index, images: this.images_list });
          modal.present();
        }
      }]
    }).present();

  }

  /**获取mimetype */
  getMimeType(type) {
    if (type == 'mp3' || type == 'wav') {
      return 'audio/*';
    } else if (type == 'mpeg' || type == 'mp4' || type == 'mpg' || type == 'mov' || type == '3gp') {
      return 'video/*'
    }
  }

HTML代码：

 /**当前页面图片展示*/
   <ion-item *ngIf="images_list.length > 0">
      <div class="imageContainer">
          <div class="image-item" *ngFor="let movie of images_list;let i=index" (click)="viewImages(i)">
              <img width="74" height="74" [src]="movie.src" *ngIf="movie" (press)="onHold()">
          </div>
      </div>
  </ion-item>

打开新窗口预览图片：

TS代码：

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, AlertController, Slides } from 'ionic-angular';
import { GLOBAL_CONST } from "../../providers/Constants";

@IonicPage()
@Component({
  selector: 'page-image-popover',
  templateUrl: 'image-popover.html'
})
export class ImagePopoverPage {
  showTrash: boolean = true;
  images: string[];
  initialSlide: number;
  @ViewChild("Slides") slides: Slides;

  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl: ViewController,
    private alertCtrl: AlertController) {
    if (this.navParams.get('fromNetWork')=='true') {
      this.showTrash = false;
    }
    console.info(this.showTrash)
  }

  ionViewDidLoad() {

    this.initialSlide = this.navParams.get('initialSlide');
    this.images = this.navParams.get('images');
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }
  showConfirm() {
    let that = this;
    let confirm = this.alertCtrl.create({
      title: '提示',
      message: '要删除这张照片吗?',
      buttons: [
        {
          text: '取消',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: '确定',
          handler: () => {
            let index = that.slides.getActiveIndex();
            that.images.splice(index, 1);
            if (that.images.length > 0) {
              if (that.slides.isEnd()) {
                index = index - 1;
              }
              that.slides.slideTo(index);
            }
            else {
              that.dismiss();
            }

          }
        }
      ]
    });
    confirm.present();
  }

}

html代码：

<ion-header>
  <ion-navbar>
    <ion-title>图片预览</ion-title>
    <ion-buttons end>
      <button *ngIf="showTrash" ion-button icon-only (click)="showConfirm()" color="danger">
                <ion-icon name="trash"></ion-icon>
            </button>
    </ion-buttons>

    <ion-buttons end>
      <button ion-button icon-only (click)="dismiss()">
                <span showWhen="ios">关闭</span>
               <ion-icon name="close" hideWhen="ios"></ion-icon>
            </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content style="background: #000">
  <ion-slides #Slides initialSlide="{{initialSlide}}">
    <ion-slide *ngFor="let image of images">
      <img [src]="image.src" />
    </ion-slide>
  </ion-slides>
</ion-content>