ionic ngcordova camera

拍照是經常用到的，所以記錄一下拍照的代碼...

ionic start camera blank
cd camera
ionic platform add ios

2. 添加插件，這裏很熟悉....

1 cordova plugin add org.apache.cordova.camera

可以從這裏下載 ngcordova.min.js 或者ngcordova.js

然後添加到www/lib/ionic/js 文件夾下（不強求....）

4.在index.html 引用ngcordova.min.js 如下必須在cordova.js之前

 1 <html>
 2   <head>
 3     <meta charset="utf-8">
 4     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 5     <title></title>
 6 
 7     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
 8     <link href="css/style.css" rel="stylesheet">
 9 
10     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
11     <link href="css/ionic.app.css" rel="stylesheet">
12     -->
13 
14     <!-- ionic/angularjs js -->
15     <script src="lib/ionic/js/ionic.bundle.js"></script>
16 
17     <!-- cordova script (this will be a 404 during development) -->
18     <script src="lib/ionic/js/ng-cordova.min.js"></script>
19     <script src="cordova.js"></script>
20 
21     <!-- your app's js -->
22     <script src="js/app.js"></script>
23   </head>

5. 在app.js中聲明引用了 ngcordova

如

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

　　6. 添加控制器在app.js中

如

 1 .controller("cameraController", function($scope, $cordovaCamera) {
 2  
 3     $scope.takePicture = function() {
 4         var options = { 
 5             quality : 75, 
 6             destinationType : Camera.DestinationType.DATA_URL, 
 7             sourceType : Camera.PictureSourceType.CAMERA, 
 8             allowEdit : true,
 9             encodingType: Camera.EncodingType.JPEG,
10             targetWidth: 300,
11             targetHeight: 300,
12             popoverOptions: CameraPopoverOptions,
13             saveToPhotoAlbum: false
14         };
15  
16         $cordovaCamera.getPicture(options).then(function(imageData) {
17             $scope.imgURI = "data:image/jpeg;base64," + imageData;
18         }, function(err) {
19             // An error occured. Show a message to the user
20         });
21     }
22  
23 });

7.在 index.html中顯示調用

 1  <body ng-app="starter">
 2 
 3     <ion-pane>
 4       <ion-header-bar class="bar-stable">
 5         <h1 class="title">Ionic camera demo</h1>
 6       </ion-header-bar>
 7      <ion-content ng-controller="cameraController">
 8     <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
 9     <img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
10     <button class="button" ng-click="takePicture()">Take Picture</button>
11     </ion-content>
12     </ion-pane>
13   </body>