1、需求描述
最近要做一個功能就是調(diào)用攝像頭拍照，然后上傳照片的功能，或者直接打開圖庫選擇照片然后上傳。
2、準備
①、添加插件$cordovaCamera
cordova plugin add cordova-plugin-camera
②、在controller中添加依賴
3、代碼實現(xiàn)
$scope.takePhoto = function() {
var options = {
//這些參數(shù)可能要配合著使用，比如選擇了sourcetype是0，destinationtype要相應的設置
quality: 100,
//相片質(zhì)量0-100
destinationType: Camera.DestinationType.FILE_URI,
//返回類型：DATA_URL= 0，返回作為 base64 編碼字串。 FILE_URI=1，返回影像檔的 URI。NATIVE_URI=2，返回圖像本機URI (例如，資產(chǎn)庫)
sourceType: Camera.PictureSourceType.CAMERA,
//從哪里選擇圖片：PHOTOLIBRARY=0，相機拍照=1，SAVEDPHOTOALBUM=2。0和1其實都是本地圖庫
allowEdit: false,
//在選擇之前允許修改截圖
encodingType: Camera.EncodingType.JPEG,
//保存的圖片格式： JPEG = 0, PNG = 1
targetWidth: 200,
//照片寬度
targetHeight: 200,
//照片高度
mediaType: 0,
//可選媒體類型：圖片=0，只允許選擇圖片將返回指定DestinationType的參數(shù)。 視頻格式=1，允許選擇視頻，最終返回 FILE_URI。ALLMEDIA= 2，允許所有媒體類型的選擇。
cameraDirection: 0,
//槍后攝像頭類型：Back= 0,Front-facing = 1
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true //保存進手機相冊
};
$cordovaCamera.getPicture(options).then(function(imageData) {
CommonJs.AlertPopup(imageData);
var image = document.getElementById('myImage');
image.src = imageData;
//image.src = "data:image/jpeg;base64," + imageData;
},
function(err) {
// error
CommonJs.AlertPopup(err.message);
});
};
4、幾點說明
①如果要保存照片，需要設置destinationType是返回圖像路徑，然后設置saveToPhotoAlbum: true，這兩個參數(shù)都設置才能保存照片,我發(fā)現(xiàn)如果設置了長和寬保存的照片質(zhì)量會很差，去掉的畫質(zhì)量不錯。但我android會默認存到
file://storage/sdcard0/Pictures中，我手機相冊沒識別出來。而且這個時候雖然設置allowEdit: true，但是返回來的是源文件的路徑，這個剪裁功能等于沒有用。
②如果要截取圖片，要設置allowEdit: true，設置長和寬，并且destinationType返回的是base64位編碼字符串。
③當設置sourceType: Camera.PictureSourceType.CAMERA時，這個時候的選擇圖庫的界面很難看，需要設置sourceType為0或者2這個時候調(diào)用的就是系統(tǒng)的圖庫，好看點。所以我們實現(xiàn)拍照，然后在拍照的成功回調(diào)中調(diào)用打開相冊選擇圖片，效果會好一點。
④長和寬的設置只影響剪裁框的大小，也就是如果返回base64會影響圖片的大小，返回uri不會影響。
⑤設置成png比jpg的效果還差。
⑥當我設置Camera.DestinationType.NATIVE_URI，剪裁的時候返回以前照的同一張照片，但是放在image標簽中的照片是最新的。后來我發(fā)現(xiàn)是這個問題導致的encodingType:Camera.EncodingType.PNG。
⑦這句話別人說是清理緩存用的，具體實現(xiàn)沒用過，以后再研究吧
$cordovaCamera.cleanup().then(...); // only for FILE_URI
⑧之后我會完善博客內(nèi)容，當選擇上傳的時候彈出一個actionsheet，里面有選擇圖庫，拍照等選項。上傳的話可以直接把base64編碼字符串直接傳到后臺處理，也可以用angular的上傳，也可以用cordova-tranfer.
⑨調(diào)用前置攝像頭一直不成功，只能手動切換。
5、（補充）頭像圖片圓形裁剪樣式（border-radius: 50%）
6、參考文章
http://www.w3cfuns.com/notes/15182/8ebe31bd63584acadbf725354419d95a.html
http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html
http://www.hangge.com/blog/cache/detail_1146.html#
