ionic混合开发总结之调用手机相机

整理一下，给接触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: false

13         };

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混合开发总结之调用手机相机

最新文章

热门文章