前言
上一篇文章已經(jīng)闡述了如何進(jìn)行ionic項(xiàng)目的快速開(kāi)發(fā)和一些注意事項(xiàng)，接下來(lái)這一篇就簡(jiǎn)單說(shuō)明一下多圖片選擇器的使用。
在很多場(chǎng)景中我們都需要用到圖片的選擇，其中有選擇一張圖片的，也有選擇多張圖片的。選擇一張圖片的話，可以使用cordova-plugin-camera插件，如果需要選擇多張圖片的話，可以使用cordova-plugin-telerik-imagepicker插件。
安裝
在ionic的官網(wǎng)上有imagepicker插件的安裝介紹。
步驟一：打開(kāi)終端，cd進(jìn)入到你的項(xiàng)目路徑，輸入：
ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
your usage message 是你要訪問(wèn)圖片權(quán)限的說(shuō)明，這個(gè)是必須寫的，否則在iOS平臺(tái)和android6+平臺(tái)上，程序會(huì)奔潰。
步驟二：需要將安裝好后的插件通過(guò)npm安裝到ionic-native中，這樣在后面的頁(yè)面使用到這個(gè)imagepicker的時(shí)候，可以導(dǎo)入直接使用。安裝命令：
npm install --save @ionic-native/image-picker
使用
1）在app.module.ts中導(dǎo)入
import{ ImagePicker } from'@ionic-native/image-picker';
2）在app.module.ts中的providers中寫入ImagePicker，這個(gè)是ionic導(dǎo)入插件的方式。
3）在需要使用到imagepicker的頁(yè)面的ts文件中導(dǎo)入
import{ ImagePicker } from'@ionic-native/image-picker';
4）在需要使用到imagepicker的頁(yè)面的ts文件的constructor中聲明一下實(shí)例。
constructor(private imagePicker: ImagePicker){ }
5）接著就可以在你的頁(yè)面中調(diào)用imagepicker的API了。
let options = {
maximumImagesCount: **9**,
outputType: 0,
title:"相冊(cè)"
width:800,
height:800,
quality: 100,
};
this.imagePicker.getPictures(options).then((results) => {
for(vari =0; i < results.length; i++) {
console.log('Image URI: '+ results[i]);
}
}, (err) => {
});
參數(shù)說(shuō)明：
maximumImagesCount：這個(gè)是最多選擇的圖片數(shù)量。
outputType：輸出的數(shù)據(jù)類型，默認(rèn)是FILE_URI對(duì)應(yīng)的值是0，DATA_URL對(duì)應(yīng)的值是1，也就是編碼的base64。
width：圖片的寬度。
height：圖片的高度。
quality：圖片的質(zhì)量，0最小，100最大。
title：選擇器的標(biāo)題，注意這個(gè)一定要寫上，否則圖片選擇頁(yè)面的標(biāo)題默認(rèn)是英文的。
圖片的權(quán)限
在iOS中，對(duì)于圖片的選擇，這個(gè)涉及到隱私，需要得到用戶的允許；在android6+之后也加入了用戶的權(quán)限允許。所以在進(jìn)行調(diào)用imagepicker的API之前一定要先判斷一下，是否已經(jīng)得到用戶的權(quán)限允許。
hasReadPermission是判斷用戶是否已經(jīng)閱讀過(guò)權(quán)限，如果true，則調(diào)用getPictures API；如果為false，則調(diào)用requsetReadPermession來(lái)請(qǐng)求權(quán)限彈窗。
需要注意，requsetReadPermession只是彈出一個(gè)權(quán)限的窗口，窗口中的“允許”和“不允許”按鈕是沒(méi)有回調(diào)事件的。正是因?yàn)闆](méi)有回調(diào)事件，所以“允許”和“不允許”之后的事件處理就不好操作。
權(quán)限處理的完整步驟：
首先，在app的platform ready之后調(diào)用requsetReadPermession，此時(shí)app啟動(dòng)后就會(huì)有一個(gè)權(quán)限彈窗，不管用戶選擇“允許”還是“不允許”，然后去到使用相冊(cè)插件的頁(yè)面，調(diào)起相冊(cè)的API的時(shí)候就要進(jìn)行判斷，如果返回是false，可以彈出一個(gè)dialog告知用戶相冊(cè)權(quán)限已被禁止，需到手機(jī)的“設(shè)置”中修改，如果是true，則調(diào)用getPictures API。
1）platform ready中：
imagePicker.requestReadPermission();
2）需要調(diào)用相冊(cè)API的頁(yè)面中：
this.imagePicker.hasReadPermission().then((hasReadPermission)=>{//檢查是否已經(jīng)閱讀相冊(cè)權(quán)限
console.log("--hasReadPermission--" + hasReadPermission);
if(hasReadPermission == true){//是否允許
this.getPhotoLibrary();
}else {
this.methodsProvider.alertText("相冊(cè)權(quán)限已被您禁止！如需訪問(wèn)相冊(cè),請(qǐng)到手機(jī)的\"設(shè)置\"-\”該app\"-允許相冊(cè)訪問(wèn)");
}
});
ps：對(duì)于權(quán)限彈窗的“允許”和“不允許”沒(méi)有回調(diào)事件，在GitHub上看到有人是這樣處理的，還是先調(diào)用hasReadPermission ，如果返回false，就調(diào)用requsetReadPermession，如果也是返回false，就再次調(diào)用hasReadPermission，再次返回false的話，就再調(diào)用requsetReadPermession，這樣周而復(fù)始。對(duì)于iOS來(lái)說(shuō)，這樣循環(huán)調(diào)用，權(quán)限彈窗始終只有一個(gè)，不會(huì)因?yàn)檠h(huán)調(diào)用requsetReadPermession而導(dǎo)致多個(gè)權(quán)限彈窗，但是在Xcode上查看CPU一直在上漲，這樣是不允許的；對(duì)于android來(lái)說(shuō)。循環(huán)調(diào)用requsetReadPermession，如果此時(shí)不要點(diǎn)擊權(quán)限彈窗的“不再提醒”并且點(diǎn)擊“不允許”，那么權(quán)限彈窗會(huì)一直彈出來(lái)，這樣也是不允許的。
ImagePicker漢化
如果開(kāi)發(fā)的app是給國(guó)內(nèi)的用戶使用的話，那么需要對(duì)imagepicker進(jìn)行漢化，可以參考這篇文章。
需要指出說(shuō)明的是iOS不需要漢化，Resources目錄下已經(jīng)有文件夾zh-Hans.lproj ，但是對(duì)于android，則需要在platforms/android/res下創(chuàng)建文件夾values-zh，其下創(chuàng)建文件multiimagechooser_strings_zh.xml。 寫入：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="multi_app_name">圖片選擇器</string>
<string name="free_version_label">還可以選擇 %d 張圖片</string>
<string name="error_database">打開(kāi)圖像數(shù)據(jù)庫(kù)時(shí)出錯(cuò),請(qǐng)反饋問(wèn)題.</string>
<string name="requesting_thumbnails">請(qǐng)求縮略圖，請(qǐng)耐心等待</string>
<string name="multi_image_picker_processing_images_title">正在處理...</string>
<string name="multi_image_picker_processing_images_message">請(qǐng)稍等...</string>
<string name="discard" translatable="false">取消</string>
<string name="done" translatable="false">確定</string>
</resources>
注意點(diǎn)
1）ionic官網(wǎng)有2個(gè)imgaepicker，
https://github.com/wymsee/cordova-imagePicker
這個(gè)是比較舊的插件，可以使用，但是不能返回base64，只能返回file uri，如果想要將file uri轉(zhuǎn)換為base64，可以使用file插件中的readAsDataURL API來(lái)轉(zhuǎn)換。
let path;
if(this.platform.is('ios')){//ios
path = this.file.tempDirectory;
}else {
path = this.file.cacheDirectory;
}
//獲取最后一個(gè)“/”的index
let index = file_uri.lastIndexOf("\/");
//獲取最后一個(gè)"/"的內(nèi)容最為fileName
let fileName = file_uri.substring(index+1,file_uri.length);
this.file.readAsDataURL(path, fileName)
.then(base64File=>{
});
另一個(gè)插件：
https://github.com/Telerik-Verified-Plugins/ImagePicker
這個(gè)是ionic官方推薦的，返回可以是base64數(shù)據(jù)，但是剛開(kāi)始使用的時(shí)候，android在選擇圖片的時(shí)候總是會(huì)crash，要查看AndroidManifest文件中是否寫入：
<uses-permission android:name="android.permission.CAMERA" />
也有些人提示修改com.android.support:support 的版本問(wèn)題。
后面是通過(guò)寫入移除android平臺(tái)，再重新加入android，并且寫入android.permission.CAMERA解決了問(wèn)題。
2）在漢化imagepicker的時(shí)候，需要給option的title參數(shù)賦值，否則圖片選擇頁(yè)面的title默認(rèn)是英文。
3）如果設(shè)置了maximumImagesCount，那么再選取完圖片之后需要重新設(shè)置option的maximumImagesCount。
4）如果返回是file uri，對(duì)于android平臺(tái)，這些文件會(huì)存儲(chǔ)在臨時(shí)文件里面，并且app不會(huì)自行清除，那么需要手動(dòng)清除，可以使用file插件的removeFile API來(lái)清除。
原文：
When outputType is FILE_URI the plugin returns images that are stored in a temporary directory. These images will often not be deleted automatically though. The files should be moved or deleted after you get their filepaths in javascript. If Base64 Strings are being returned, there is nothing to clean up.
總結(jié)
cordova-plugin-camera插件可以直接調(diào)用API，不需進(jìn)行權(quán)限的判斷，getPictures已經(jīng)包含了權(quán)限的判斷，但是只能選去一張圖片，而且選完圖片之后還有一個(gè)圖片范圍的截取，對(duì)于很多應(yīng)用是沒(méi)有必要的。因此，只能使用imagepicker插件，在使用這個(gè)插件過(guò)程中遇到過(guò)許多問(wèn)題，也進(jìn)行了許多測(cè)試，其中最多的問(wèn)題就是權(quán)限的問(wèn)題和android crash的問(wèn)題，后面都一一解決了。
