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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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混合开发总结之调用手机相机的主要内容,如果未能解决你的问题,请参考以下文章

Ionic+AngularJS 开发之『个人日常管理』App

Ionic+AngularJS 开发之『个人日常管理』App

混合式移动应用开发浅析之Ionic/Cordova vs React Native

图书Ionic实战:基于AngularJS的移动混合应用开发

ionic

杂项:ionic