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 了。除非是存演示类项目。