首页/Ionic/列表

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

来源:  2018-04-09 16:17:36    评论:0点击:

整理一下,给接触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,就可以做一些处理了,不论是上传,还是显示都可以操作了。
 
$scope.getCamera = function(){
      if($scope.data.y_image.length<9){
        var options = {
          quality: 70,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.CAMERA,
          //allowEdit: true,
          encodingType: Camera.EncodingType.JPEG,
          targetWidth: 480,
          targetHeight: 720,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: false
        };
        $cordovaCamera.getPicture(options).then(function(imageData) {
          var imagedata = imageData;
          $scope.data.isimage = true;
          $ionicLoading.show({
            template: '图片上传中...'
          });
          client.UpdateImage(imagedata, function (result) {
            $ionicLoading.hide();
            $scope.data.y_image.push({'src':"data:image/jpeg;base64," + imageData,'val':'/Yuonhtt_FileUpload/img/'+result});
            $scope.$digest();
          }, function (name, err) {
            alert(err);
          });
        }, function(err) {
          console.log(err);
        });
      }else{
        var confirmPopup = $ionicPopup.alert({
          title: '提醒',
          template: '上传图片超过9张!',
          okText:'确 认',
          okType:'button-assertive'
        });
        confirmPopup.then(function(res) {
        });
      }

    };
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权