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

一、需求描述

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

二、準備

　　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']){

　　　　　　...

　　　　}

三、代碼實現

　　

 1 ("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){
18 　　　　//error
19 　　});
20 },false);

 1 document.addEventListener("deviceready",function(){
 2 　　var options = {
 3 　　　　maximumImagesCount: 10, //最大選擇圖片數量
 4 　　　　width: 800,             //篩選寬度：若是寬度爲0，返回全部尺寸的圖片  5 　　　　height: 800,            //篩選高度：若是高度爲0，返回全部尺寸的圖片  6 　　　　quality: 80             //圖像質量的大小，默認爲100
 7 　　};
 8 　　$cordovaImagePicker.getPictures(options).then(function (results) {
 9 　　　　for (var i = 0; i < results.length; i++) {
10 　　　　　　alert('Image URI: ' + results[i]);
11 　　　　}
12 　　},function(error) {
13 　　　　// error getting photos
14 　　});
15 },false);