安装插件:
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>
文章评论