Ionic开发App系列--手机拍照功能

1.使用npm 安装bower

cnpm install -g bower

2.使用bower安装ngCordova

在项目目录下：

bower install ngCordova

3.导入ng-cordova.js

在index.html中引入ng-cordova.js：

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

注意：ng-cordova.js要在cordova.js之前,ionic.bundle.js之后引入

4.在angular中添加ngCordova依赖

angular.module('starter.controllers', ['ngCordova'])

5.安装相机插件

在项目目录下执行：

cordova plugin add cordova-plugin-media-capture

6.调用

$cordovaCapture需要在contrller传入

    document.addEventListener("deviceready", function () { 检测设备是否就绪
      //调用相机的function
      $scope.captureImage = function() {
        var options = { limit: 3 };
        $cordovaCapture.captureImage(options).then(function(imageData) {
          //获取到image信息，按业务需求进行操作...
        }, function(err) {
          //err
        });
      }
    }, false);

limit:在单个采集操作期间能够采集的图像数量最大值

7.使用场景

<button class="button button-block" ng-click="captureImage()">拍照</button>