ionic2/3 图片保存到相册---利用cordova-plugin-photo-library插件

ionic中很多功能都是可以利用插件完成的，而且简捷方便，此次图片保存到相册就是利用cordova-plugin-photo-library完成的。

官方文档         ionic： https://ionicframework.com/docs/native/photo-library/

                       GitHub：https://github.com/terikon/cordova-plugin-photo-library 或 npm：https://www.npmjs.com/package/cordova-plugin-photo-library

 

 

ionic的官方文档只解释了插件安装和每个方法参数。而GitHub的文档和npm文档都是一样的，都对方法之间有比较清晰的逻辑，认真阅读文档就能找到方法！我在此就是整理了一下实现逻辑。

1、安装插件

ionic plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos"
npm install --save @ionic-native/photo-library

2、实现

1、在html中添加点击事件和图片

1. <ion-content padding>

2. <img style="width:300px;height:450px" src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" (press)="onHold()">

3. </ion-content>

press：长按500ms，类似于手势中的长按；

onHold()：点击方法。

 

 

2、在.ts中添加方法

引入

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

import {ActionSheetController} from 'ionic-angular';

添加如下，使得可用cordova

declare var cordova: any;

点击执行方法

 

android，会要求用户允许访问存储；ios，会首先打开权限提示。所以，要想修改相册首先要有权限，允许了，才能保存到相册。

流程：首先要请求授权-----requestAuthorization()，用户给了权限可以了，再执行下一步；
           然后处理获取权限------getLibrary，权限获取成功，执行下一步；
           最后图片保存-----saveImage。

onHold() {
  //alert('kkkkkkk');
  var imgSrc = "http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg";
    this.presentActionSheet(imgSrc);
}
  // 弹出选择框
presentActionSheet(imgUrl:string) {
    let actionSheet = this.actionSheetCtrl.create({
    title: '提示',
    buttons: [
        {
        text: '保存到相册',
        role: 'destructive',
        handler: () => {
            // 保存图片
             this.saveImage(imgUrl);
            console.log('Destructive clicked');
        }
        },
        {
        text: '取消',
        role: 'cancel',
        handler: () => {
            console.log('Cancel clicked');
        }
        }
    ]
    });
    actionSheet.present();
 }
 
 saveImage(imgUrl) {
       cordova.plugins.photoLibrary.requestAuthorization(
    function () {
        // User gave us permission to his library, retry reading it! 
            cordova.plugins.photoLibrary.getLibrary(
                function ({library}) { 
                    //var url = 'file:///...'; // file or remote URL. url can also be dataURL, but giving it a file path is much faster 
                    var album = 'myApp';
                    cordova.plugins.photoLibrary.saveImage(imgUrl, album, 
                    function (libraryItem) {
                        alert("保存成功"+libraryItem);
                    }, function (err) {
                        alert('保存失败'+err);
                    });
                },
                function (err) {
                    if (err.startsWith('Permission')) {
                    // call requestAuthorization, and retry 
                    }
                    // Handle error - it's not permission-related 
                    console.log('权限'+err);
                    
                }
            );
        },
        function (err) {
            // User denied the access 
            alert('用户拒绝访问'+err);
        }, // if options not provided, defaults to {read: true}. 
        {
            read: true,
            write: true
        }
    );
       
  }
 

 

其中图片的URL是外部传入，album就是自己APP的名字。

 

 

转载地址:----------------https://blog.csdn.net/yah_529/article/details/72475293