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