Ionic3 UI組件之 ImagePicker

ImagePicker插件實現設備上的多個圖像選擇的功能。

組件特性：

• 統一選擇界面，避免不同設備選擇界面不一樣的問題；
• 支持多選，並且可以設置最多選擇的張數；
• 選擇數量超出設置時會提示；
• Camera.PictureSourceType.PHOTOLIBRARY里面只能單選，對於多圖像的情況下會比較麻煩。

參考地址：

　　https://github.com/Telerik-Verified-Plugins/ImagePicker

=============================================================================

1）安裝包和插件：

cordova plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker.git

這里發現一個奇怪的問題，參考官網的教程，使用：

ionic cordova plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker.git時安裝出錯，如下：

暫未找到原因。后來直接使用cordova plugin add才安裝成功。另外就是需要提前安裝好git客戶端，這里不做介紹。

繼續，別忘了安裝包：npm install --save @ionic-native/image-picker

添加好的插件，可以從你的項目目錄中找到：

2）在app.module.ts中增加：

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

providers：[]里面同樣加上ImagePicker；

3）在使用的頁面中，增加：

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

別忘了構造器。

4）具體使用：

ImagePickerOptions參見官網。

5）實現效果：

 

統一的選擇組件界面，支持多選，選擇后有陰影遮罩效果；超出數量設置時會提示；

如果不使用此組件，使用Camera插件的PHOTOLIBRARY，會出現的問題就是無法多選，並且選擇界面依賴於手機的操作系統，

不同的手機可能會出現選擇界面不一致的情況，影響用戶體驗。如下（華為Mate7，EMUI4.0，Android6.0）：