ng-cordova 手機拍照或從相冊選擇圖片

1、需求描述

　　實現一個調用攝像頭拍照，或者直接打開本地圖庫選擇照片，然后替換App中圖片的功能

2、准備

　　1) 安裝ng-cordova

　　　　進入到ionic工程目錄，使用bower工具安裝，

　　　　bower install ngCordova 

　　　　然后將ng-cordova.js 或者 ng-cordova.min.js 添加到index.html 中的 cordova.js 引用之前

　　　　...

　　　　<script src="lib/ngCordova/dist/ng-cordova.js"></script>

　　　　<script src="lib/cordova.js></script>

　　　　...

　　　　在angular中添加ngCordova依賴

　　　　　　　angular.module('myApp',['ngCordova'])

　　2) 安裝 $cordovaCamera

　　　　cordova plugin add cordova-plugin-camera  

　　　　在controller中添加依賴

　　　　.controller('appControl',['$cordovaCamera']){

　　　　　　...

　　　　}

　　3)安裝$cordovaImagePicker

　　　　cordova plugin add cordova-plugin-image-picker  　　　　

　　　　在controller中添加依賴

　　　　.controller('appControl',['$cordovaImagePicker']){

　　　　　　...

　　　　}

3、代碼實現

　　

("deviceready",function(){
 2 　　//拍照
 3 　　var options={
 4 　　　　quality:50,                                       //保存圖像的質量，范圍0-100  5 　　　　destinationType:Camera.DestinationType.DATA_URL,  //返回值格式:DATA_URL=0,返回作為base64編碼字符串；FILE_URL=1，返回圖像的URL；NATIVE_RUL=2，返回圖像本機URL  6 　　　　sourceType:Camera.PictureSourceType.CAMERA,       //設置圖片來源：PHOTOLIBRARY=0，相機拍照=1，  7 　　　　allowEdit:true,                                   //選擇圖片前是否允許編輯  8 　　　　encodingType:Camera.EncodingType.JPEG,            //JPEN = 0，PNG = 1  9 　　　　targetWidth:100,                                  //縮放圖像的寬度（像素） 10 　　　　targetHeight:100,                                 //縮放圖像的高度（像素） 11 　　　　popoverOptions:CameraPopoverOptions,              //ios,iPad彈出位置 12 　　　　saveToPhotoAlbum:true,                            //是否保存到相冊 13 　　　　correctOrientation:true                           //設置攝像機拍攝的圖像是否為正確的方向
14 　　};
15 　　$cordovaCamera.getPicture(options).then(function(imageData){
16 　　　　$scope.imageSrc="data:image/jpeg;base64,"+imageData;
17 　　},function(err){
　　　　//error
19 　　});
20 },false);

document.addEventListener("deviceready",function(){
　　var options = {
　　　　maximumImagesCount: 10, //最大選擇圖片數量
　　　　width: 800,             //篩選寬度：如果寬度為0，返回所有尺寸的圖片  5 　　　　height: 800,            //篩選高度：如果高度為0，返回所有尺寸的圖片  6 　　　　quality: 80             //圖像質量的大小，默認為100
　　};
　　$cordovaImagePicker.getPictures(options).then(function (results) {
　　　　for (var i = 0; i < results.length; i++) {
　　　　　　alert('Image URI: ' + results[i]);
　　　　}
　　},function(error) {
　　　　// error getting photos
　　});
},false);