ionic2 点击查看大图 再次点击关闭

import { Injectable } from '@angular/core';

import { Component } from '@angular/core';

import { App, ViewController, NavOptions, NavParams, ActionSheetController,ToastController } from 'ionic-angular';

import { File, DirectoryEntry } from '@ionic-native/file';

import { AndroidPermissions } from '@ionic-native/android-permissions';

import { FileTransfer } from '@ionic-native/file-transfer';

import { PhotoLibrary } from '@ionic-native/photo-library';

import { LinkPhpService } from '../../services/linkphp.service';

import { SelectArtService } from '../../services/selectArt.service';

@Injectable()

export class BigImageController {

    constructor(private app: App) {

    }

    /**

     * 开启大图

     * @param

     */

    open(src:Array<string>) {

        let vc = new BigImageViewController(this.app, src);

        vc.present();

    }

}

/**

* 控制器

*/

class BigImageViewController extends ViewController {

    private _app: App;

    /**

     * 全屏遮罩控制器

     * @param app

     */

    constructor(app: App, srcArr: Array<string>) {

        super(BigImageComponent, { srcArr: srcArr }, "big-image-comp");

        this._app = app;

        this.isOverlay = true;

    }

    /**

     * 显示

     * @param navOptions

     */

    present(navOptions: NavOptions = {}) {

        return this._app.present(this, navOptions);

    }

}

@Component({

    selector: 'big-image-comp',

    template: `

            <div class="big_image_comp_div">

                <div class="big_image_comp_img" style="background:#000;" (tap)="close()">

                    <ion-slides pager>

                        <ion-slide *ngFor="let src of srcArr" (press)="saveImage(src)">

                            <detailed-image-comp [src]="src"></detailed-image-comp>

                        </ion-slide>

                    </ion-slides>

                </div>

            </div>`

})

export class BigImageComponent {

    private srcArr: Array<string>;

    private StoragePath: DirectoryEntry;

    constructor(

        private vc: ViewController,

        private navparams: NavParams,

        private actionSheetCtrl: ActionSheetController,

        private ap: AndroidPermissions,

        private fileNative: File,

        private fileTransfer: FileTransfer,

        private photoLibrary: PhotoLibrary,

        private tcdSer: SelectArtService,

        public linkphpurl: LinkPhpService,

        private tc:ToastController

    ) {

        if (this.navparams && this.navparams['data']) {

            this.srcArr = this.navparams['data']['srcArr'];

        }

    }

    /**

     * 保存图片

     */

    saveImage(src: string) {

        let actionSheet = this.actionSheetCtrl.create({

            buttons: [

                {

                    text: '保存图片',

                    role: 'destructive',

                    handler: () => {

                        this.downImage(src).then((res) => {

                            this.tc.create({message:'保存成功!',duration:2000}).present();

                            console.log(res);

                        }).catch(e => {

                            console.log(e);

                            this.tc.create({message:'保存失败,请稍后重试!',duration:2000}).present();

                        });

                    }

                }, {

                    text: '取消',

                    role: 'cancel'

                }

            ]

        });

        actionSheet.present();

    }

    /**

     * 关闭大图

     */

    close() {

        this.vc.dismiss();

    }

    /**

 * 下载图片

    */

    private downImage(url: string): Promise<any> {

        return this.requestPermission().then(() => {

            return this.createOrFindDir();

        }).then(() => {

            this.tcdSer.getimage(url).then(data => {

                let type = data['type'];

                let rq = data['rq'];

                let fileYuanName = url;

                let filename = url;

                let srcUrl = this.linkphpurl.linkPhpUrl + "DiQiuCunWangXin-PHP/common/php/fileDownload.php?type=" + type + "&rq=" + rq + "&fileName=" + fileYuanName + "&name=" + filename;

                this.photoLibrary.saveImage(srcUrl, 'images').then((res) => {

                    console.log(res);

                }).catch(e => {

                    console.log(e);

                });

            })

        }).catch((e) => {

            console.log("downloadFiles throws error: ", e);

            return Promise.reject(e);

        });

    }

    /**

     * 创建或找到素材存储路径。(若没有,则创建,若有,则直接返回)

     */

    private createOrFindDir(): Promise<void> {

        return this.fileNative.checkDir(this.fileNative.externalDataDirectory, 'images').then((pathExists) => {

            if (pathExists) {

                return this.fileNative.resolveDirectoryUrl(this.fileNative.externalDataDirectory + 'images');

            } else {

                return Promise.reject(false);

            }

        }).catch((e) => {

            return this.fileNative.createDir(this.fileNative.externalDataDirectory, 'images', false);

        }).then((rootPath: DirectoryEntry) => {

            return this.fileNative.getDirectory(rootPath, 'images', null);

        }).catch((e) => {

            return this.fileNative.resolveDirectoryUrl(this.fileNative.externalDataDirectory + 'images');

        }).then((path: DirectoryEntry) => {

            this.StoragePath = path;

            return Promise.resolve();

        }).catch((e) => {

            console.log(e);

        });

    }

    /**

     * 获取权限

     */

    private requestPermission(): Promise<void> {

        return this.ap.checkPermission(this.ap.PERMISSION.READ_EXTERNAL_STORAGE).then((result) => {

            if (!result.hasPermission) {

                return this.ap.requestPermission(this.ap.PERMISSION.READ_EXTERNAL_STORAGE);

            } else {

                return Promise.resolve({ hasPermission: true });

            }

        }).catch((result) => {

            return this.ap.requestPermission(this.ap.PERMISSION.READ_EXTERNAL_STORAGE);

        }).then((result) => {

            if (!result.hasPermission) {

                return Promise.reject("没有获得设备权限。");

            } else {

                return this.ap.checkPermission(this.ap.PERMISSION.WRITE_EXTERNAL_STORAGE);

            }

        }).then((result) => {

            if (!result.hasPermission) {

                return this.ap.requestPermission(this.ap.PERMISSION.WRITE_EXTERNAL_STORAGE);

            } else {

                return Promise.resolve({ hasPermission: true });

            }

        }).catch((result) => {

            return this.ap.requestPermission(this.ap.PERMISSION.WRITE_EXTERNAL_STORAGE);

        }).then((result) => {

            if (!result.hasPermission) {

                return Promise.reject("没有获得设备权限。");

            } else {

                return Promise.resolve();

            }

        }).catch((e) => {

            return Promise.reject(e);

        });

    }

}

猜你喜欢

转载自blog.csdn.net/xin_bao_long/article/details/81943600