Ionic项目中调用摄像头拍照

最新推荐文章于 2023-03-06 17:17:59 发布

原创最新推荐文章于 2023-03-06 17:17:59 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在Ionic项目中配置ng-cordova插件以调用摄像头功能，包括通过bower安装插件、在模块中引入ngCordova依赖以及在控制器中使用$cordovaCamera。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、配置环境，配置调用摄像头所需要的插件ng-cordova。可以使用 bower 安装，也可以离线下载后手动放到项目中去。

引入 js 文件时的顺序

添加插件$cordovaCamera

1	`cordova plugin add cordova-plugin-camera`

3.在module中引入 ng-cordova的依赖

angular.module(‘starter’,[‘ionic’,’ngCordova‘,’starter.controllers’])

4、在相应的html中对应的controllers中使用，$cordovaCamera

angular.module('orderToday.controller', ['orderToday.service'])
  .controller('orderTodayCtrl',
    function ($scope, orderTodayFty, $state,$cordovaCamera) {

      $scope.takePhoto=function(){
        var options = {
          //这些参数可能要配合着使用，比如选择了sourcetype是0，destinationtype要相应的设置
          quality: 100,                                            //相片质量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: false,                                        //在选择之前允许修改截图
          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,
          saveToPhotoAlbum: true                                   //保存进手机相册
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
          CommonJs.AlertPopup(imageData);
          var image = document.getElementById('myImage');
          image.src=imageData;
          //image.src = "data:image/jpeg;base64," + imageData;
        }, function(err) {
          // error
          CommonJs.AlertPopup(err.message);
        });

      };

    });