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、代碼實現

　　

 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 　　　　//error19 　　});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 photos14 　　});15 },false);     

 

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