ionic3保存图片到本地相册

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_28004379/article/details/81872005

1安装

PhotoLibrary插件允许通过URL访问设备中的照片。因此,您可以使用普通的img标签来显示照片及其缩略图,以及不同的第三方库。还支持将照片和视频保存到库中。

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

2.引用

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

注意,不仅仅要在使用的页面ts文件引用,还要在app.module中也要引入,在providers【】数组中。

3.使用

给一个按钮触发事件

<button ion-button (press)="saveImage()">保存图片</button>

【注意:press事件是长按事件,500毫毛】

  saveImage() {
    const actionSheet=this.actionSheetCtrl.create({
      title:'提示',
      buttons:[
        {
          text:'保存本地',
          handler:()=>{
            this.photoLibrary.requestAuthorization().then(() => {
              this.photoLibrary.getLibrary().subscribe(
                {
                next: library => {
                  library.forEach(function(libraryItem) {
                    console.log(libraryItem.id);          // ID of the photo
                    console.log(libraryItem.photoURL);    // Cross-platform access to photo
                    console.log(libraryItem.thumbnailURL);// Cross-platform access to thumbnail
                    console.log(libraryItem.fileName);
                    console.log(libraryItem.width);
                    console.log(libraryItem.height);
                    console.log(libraryItem.creationDate);
                    console.log(libraryItem.latitude);
                    console.log(libraryItem.longitude);
                    console.log(libraryItem.albumIds);    // array of ids of appropriate AlbumItem, only of includeAlbumsData was used
                  });
                  this.photoLibrary.saveImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534756821981&di=b26ecbe978f64060c219b0c4aa7b88e7&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fadaf2edda3cc7cd90df1ede83401213fb80e9127.jpg','随便起个相册名字').then(()=>{
                    alert('保存成功')
                  })
                },
                error: err => { alert('失败2') },
                complete: () => { console.log('done getting photos'); }
              });
            })
            .catch(err =>alert('失败1') );
          }
        },
        {
          text:'取消',
          role:'cancel'
        }
      ]
    })
    actionSheet.present();
  }

4效果

展开阅读全文

没有更多推荐了,返回首页