Ionic 使用相机和照片选择组件

上一篇已经实现了获取 GPS 坐标,我们再来试试相机功能。

使用相机

参考官方文档

  1. 安装相机插件,同样是两个插件都要装:

    ionic cordova plugin add cordova-plugin-camera
    npm install --save @ionic-native/camera
  2. 将 Camera 插件放到 app.module.ts 的 provider 中。
  3. 在 home.ts 中使用 Camera 插件:

    import { Camera, CameraOptions } from '@ionic-native/camera';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      constructor(
        private camera: Camera
      ) {
      }
    
      cameraData = "";
    
      useCamera() {
        const options: CameraOptions = {
          quality: 100,
          destinationType: this.camera.DestinationType.DATA_URL,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE
        }
    
        this.camera.getPicture(options).then((imageData) => {
          let base64Image = 'data:image/jpeg;base64,' + imageData;
          this.cameraData = base64Image;
        }, (err) => {
          this.cameraData = err.message;
        });
      }
    }

    不像之前获取当前 gps 坐标那样需要申请权限,使用 camera 只需要正常调用插件功能,自动就会在第一次使用时弹出系统对话框询问权限,所以代码非常简单。
    在 page.html 里面可以放置一个文本,显示 cameraData 的长度,和一个 img 显示拍摄的图片:

    <p>照片数据:{{cameraData.length}}</p>
    <img src="{{cameraData}}" alt="">

使用照片选取插件

参考官方文档

  1. 添加插件

    $ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="相册"
    $ npm install --save @ionic-native/image-picker
  2. 将 ImagePicker 添加到 app.module.ts 的 providers 里。
  3. 在 home.ts 里使用图片选取功能:

    import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      constructor(
        private imagePicker: ImagePicker
      ) {
      }
    
      useImagePicker() {
        const options: ImagePickerOptions = {
        };
    
        this.imagePicker.getPictures(options).then((results) => {
          this.selectedImageCount = results.length;
          if (results && results.length) {
            this.firstImageData = results[0];
          }
        }, (err) => { });
      }
    }
  4. 汉化。我们测试一下可以发现选取图片时的按钮写着“OK”和“Cancel”,想显示中文的话又不需要多语言的话可直接修改:

    \platforms\android\app\src\main\res\values\multiimagechooser_strings_en.xml

    更好的做法是将 values 文件夹复制一份改名叫“values-zh”,然后汉化里面的内容。

但是,这货为什么不能按相册进行过滤呢,而且滚动的性能很差,还经常整个屏幕白板,这可实在有点太简陋了。如果连一个这么常用的组件都搞得这么简陋的话,实在没法用 Ionic 开发 app 了。除非是存演示类项目。

    原文作者:井22
    原文地址: https://segmentfault.com/a/1190000014662104
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞