ionic混合開發總結之調用手機相機

標籤：gty   text   bsp   conf   confirm   外掛程式   參考   rdo   logs   

整理一下，給接觸ionic的夥伴們一些參考，少走彎路。

調用手機的前提是已經成功建立了項目。

首先，要下載兩個外掛程式，一個是 cordova-plugin-camera，是調用相機的外掛程式，還有一個是NgCordova,具體命令自己百度，網上很多。

下載完NgCordova後，不要忘記在app.js裡面添加依賴，其中的ngCordova就是依賴，

var app = angular.module(‘starter‘, [‘ionic‘, ‘ngCordova‘,‘starter.controllers‘,‘starter.loginController‘  ,‘starter.zoufang‘,‘starter.zaixian‘,  ‘starter.tongbao‘,‘starter.wentishouji‘,‘starter.zhanshiController‘,‘starter.zerenController‘])

定義調用相機的方法，這裡是拍照不能超過九張。

其中options為調用相機時設定的參數，

destinationType為拍攝完成後返回的資料格式，此處為base64編碼，

sourceType 為是從相機拍攝還是從相簿選擇，此處為相機拍攝

saveToPhotoAlbum為是否儲存到手機相簿中

其中需要注意的是controller中不要忘記添加 $cordovaCamera

其中的圖片上傳的方法自行忽略，這裡為後台給出的方法，

拿到imageData，就可以做一些處理了，不論是上傳，還是顯示都可以操作了。

 1 $scope.getCamera = function(){ 2       if($scope.data.y_image.length<9){ 3         var options = { 4           quality: 70, 5           destinationType: Camera.DestinationType.DATA_URL, 6           sourceType: Camera.PictureSourceType.CAMERA, 7           //allowEdit: true, 8           encodingType: Camera.EncodingType.JPEG, 9           targetWidth: 480,10           targetHeight: 720,11           popoverOptions: CameraPopoverOptions,12           saveToPhotoAlbum: false13         };14         $cordovaCamera.getPicture(options).then(function(imageData) {15           var imagedata = imageData;16           $scope.data.isimage = true;17           $ionicLoading.show({18             template: ‘圖片上傳中...‘19           });20           client.UpdateImage(imagedata, function (result) {21             $ionicLoading.hide();22             $scope.data.y_image.push({‘src‘:"data:image/jpeg;base64," + imageData,‘val‘:‘/Yuonhtt_FileUpload/img/‘+result});23             $scope.$digest();24           }, function (name, err) {25             alert(err);26           });27         }, function(err) {28           console.log(err);29         });30       }else{31         var confirmPopup = $ionicPopup.alert({32           title: ‘提醒‘,33           template: ‘上傳圖片超過9張!‘,34           okText:‘確 認‘,35           okType:‘button-assertive‘36         });37         confirmPopup.then(function(res) {38         });39       }40 41     };

 

ionic混合開發總結之調用手機相機