ionic添加调取摄像头插件--cordova-plugin-camera

17 篇文章 0 订阅
3 篇文章 0 订阅

首先,引入cordova和ng-cordova的js:

<script src="js/ng-cordova.js"></script>
<script src="cordova.js"></script>

第二步:在模块内加上ngCordova:

angular.module('starter.controllers', ['ionic', 'ionic-img-lazy-load', 'ionicLazyLoad','ngCordova'])

第三步:在控制器内加上依赖:

.controller('AccountCtrl',function($scope,dataInfo,$cordovaCamera) {})

完整代码:
html:

<button class="button button-bar" ng-click="takePic()">点击我试着打开照相机</button>
<img id="myImage" alt=""/>     <!-- 这里是放你拍照返回的照片 -->

js:

//调用相机插件
$scope.takePic=function(){
  var options = {
                                                              //这些参数可能要配合使用,如选择了sourcetype是0,destinationtype要相应的设置为1:【返回文件的URI(content://media/external/images/media/2 for Android)】
      quality: 50,                                            //相片质量0-100
      destinationType: Camera.DestinationType.FILE_URI,       //返回类型:DATA_URL= 0,返回作为 base64 編碼字串。 FILE_URI=1,返回影像档的 URI。NATIVE_URI=2,返回图像本机URI 
      sourceType: Camera.PictureSourceType.CAMERA,            //从哪里选择图片:PHOTOLIBRARY=0(从设备相册选择图片),相机拍照=1,SAVEDPHOTOALBUM=2,0和1其实都是本地图库
      allowEdit: true,                                        //在选择之前允许修改截图
      encodingType:Camera.EncodingType.JPEG,                  //保存的图片格式: JPEG = 0, PNG = 1
      targetWidth: 200,                                     //照片宽度
      targetHeight: 200,                                    //照片高度
      mediaType:0,                                            //可选媒体类型:圖片=0,默认值,只允许选择图片將返回指定DestinationType的参数。 視頻格式=1,允许选择视频,最终返回 FILE_URI(网址)。ALLMEDIA= 2,允许所有媒体类型的选择。
      cameraDirection:0,                                      //选择摄像头类型(前置摄像头或者后面的摄像头):Back= 0(后置),Front-facing = 1(前置)
      popoverOptions: CameraPopoverOptions,                   //CameraPopoverOptions,iOS特供,从iPad的系统相册选择图片,指定popover的定位元素的位置箭头方向和参数
      saveToPhotoAlbum: true                                  //保存进手机相册
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {//alert(imageData);
      var image = document.getElementById('myImage');
      image.src=imageData;
  }, function(err) {
      alert("err的值:"+err)
  });
};

注:上面代码会出现一个问题,就是拍摄的照片成像效果很差,不想要这种效果的话,建议不设置targetWidth和targetHeight(照片的宽高),在css里面去设置这个img标签的样式,例如:

#myImage{
            width: 100%;
            height: 100%;
            max-width: 600px;
        }

附上这个插件文档的中英文说明供参考:
cordova-plugin-camera 插件说明文档
中文文档
英文文档

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值