ionic3 相機和相冊獲取圖片

相機拍照和相冊是 App 從手機獲取圖片的兩種主要方式。在 App 業務需求中，常常會使用到圖片獲取的功能，最爲常見的有用戶頭像設置等。
既然是經常使用功能，這一次咱們就來分析一下如何在 ionic3 中使用相機和相冊獲取圖片。

目錄：

• 插件介紹
• 使用方法
• 圖片上傳
• 注意事項

插件介紹

cordova-plugin-camera 相機插件：

安裝方法：

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

做用：
調用手機照相頭，進行拍照獲取圖片、從相冊獲取單張圖片。

cordova-plugin-image-picker 圖片獲取插件：

安裝方法：

// 注意： 
// 這個 "your usage message" 能夠本身修改
// 這是在向用戶請求權限時顯示的文字

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
$ npm install --save @ionic-native/image-picker

做用：
調用手機圖庫，獲取照片，可選擇多張。

使用方法：

先把插件添加到 app.module.ts 的 providers

Camera

import { Camera, CameraOptions } from '@ionic-native/camera';

constructor( ...
  private camera: Camera) { }

// 設置選項
const options: CameraOptions = {
  quality: 100,
  sourceType: this.camera.PictureSourceType.CAMERA,
  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;

}, (err) => {
  console.log('獲取圖片失敗');
});

理解起來應該不難，詳細解釋一下 CameraOptions

CameraOptions	做用	參數
quality	圖像質量，越高質量越好 (0-100)	number
sourceType	圖片源	PHOTOLIBRARY、CAMERA、SAVEDPHOTOALBUM
destinationType	圖片路徑	DATA_URL、FILE_URL、NATIVE_URI
encodingType	圖片類型	JPEG、PNG
mediaType	媒體類型，這個插件也能選視頻等	PICTURE、VIDEO、ALLMEDIA

重點說一下 sourceType，這個參數設置爲 PHOTOLIBRARY 就會從相冊取圖，設置爲 CAMERA 會拍照，設置爲 SAVEDPHOTOALBUM 會保存圖片。

ImagePicker

import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker';


constructor( ...
  private imagePicker: ImagePicker) { }

// 設置選項
const options: ImagePickerOptions = {
  maximumImagesCount: 6,
  width: IMAGE_SIZE,
  height: IMAGE_SIZE,
  quality: QUALITY_SIZE
};

// 獲取圖片
this.imagePicker.getPictures(options).then((results) => {
  for (var i = 0; i < results.length; i++) {
      console.log('Image URI: ' + results[i]);
  }
}, (err) => {
  console.log('獲取圖片失敗');
});

跟上面那個差很少，詳細解釋一下 ImagePickerOptions

ImagePickerOptions	做用	參數
maximumImagesCount	最多選幾張，默認 15	number
width	圖片寬度	number
height	圖片高度	number
quality	圖像質量，越高質量越好 (0-100)	number
outputType	輸入類型，默認爲 0 (FILE_URI)	number

圖片上傳

若是是 base64 圖片上傳，直接把二進制字符串做爲參數傳就好。
另外一種方式就按照 ionic3 文件上傳下載和預覽 的方法來就行

注意事項

iOS 沒法打開相冊

再執行一遍

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"

咱們執行事後，會有一個插件 com.synconset.imagepicker 生成到 package.json 中，這個會致使 npm install 運行失敗，解決方法只能把它刪除。因此你再次安裝的時候就會少一個這個插件，致使沒法獲取相冊權限。Android 上沒有這個問題。

參考資料：
https://github.com/Telerik-Ve...

ImagePickerOptions 的類型 maximumImagesCount：

源代碼中的註釋：

max images to be selected, defaults to 15. If this is set to 1, 
upon selection of a single image, the plugin will return it. (Android only)

默認 15張沒問題，設置爲 1 的時候，在安卓上插件會返回。我並無沒試過，遇到問題的朋友能夠參考這個註釋

ImagePickerOptions 的類型 outputType：

源代碼中的註釋：

Output type, defaults to 0  (FILE_URI).

並無說清除傳其餘數字會怎麼樣，咱們使用默認值就好。