码迷,mamicode.com
首页 > 其他好文 > 详细

ionic ngcordova camera

时间:2014-10-09 21:34:07      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   ar   java   

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

1. 

ionic start camera blank
cd camera ionic platform add ios

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

 1 cordova plugin add org.apache.cordova.camera 

3. 

可以從這裏下載 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>

 

ionic ngcordova camera

标签:des   style   blog   http   color   io   os   ar   java   

原文地址:http://www.cnblogs.com/xieyier/p/4014216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!