1. 程式人生 > >ionic2 儲存圖片到手機相簿

ionic2 儲存圖片到手機相簿

ionic2 儲存圖片到手機相簿需要2個原生外掛

一、原生外掛安裝

    1、Android Permissions

        通過以下命令下載

        ionic plugin add cordova-plugin-android-permissions

        npm install --save @ionic-native/android-permissions

    2、Photo Library

        通過以下命令下載

        ionic plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos"

        npm install --save @ionic-native/photo-library

    將以上原生外掛引入 app.module.ts 內

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

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

二、在儲存圖片之前先要確認有沒有許可權去儲存到相簿,沒有許可權的話需要 傳送請求去讓使用者開啟許可權,然後在儲存圖片

在元件內引入外掛並依賴注入

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

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

    constructor(private androidPermissions:AndroidPermissions,private photoLibrary:PhotoLibrary){}

/**

* 儲存圖片

* @param url 圖片路徑

*/

saveImage(url:string){

    this.androidPermissions.checkPermission(this.androidPermissions.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});

            }

}).then((hasPermission)=>{

    if(hasPermission){

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

                console.log(res);

        }).catch(e=>{

                console.log(e);

        });

}else{

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

            console.log(res);

     }).catch(e=>{

            console.log(e);

    });

}

}).catch(err=>{

    this.ap.requestPermission(this.ap.PERMISSION.WRITE_EXTERNAL_STORAGE).then(suc=>{

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

                console.log(res);

            }).catch(e=>{

                console.log(e);

        });

});

})  

}