首页 > 代码库 > ionic ngcordova camera

ionic ngcordova camera

2024-07-26 06:40:42   220人阅读

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

1. 

ionic start camera blank
cd cameraionic 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="http://www.mamicode.com/lib/ionic/css/ionic.css" rel="stylesheet"> 8     <link href="http://www.mamicode.com/css/style.css" rel="stylesheet"> 9 10     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above11     <link href="http://www.mamicode.com/css/ionic.app.css" rel="stylesheet">12     -->13 14     <!-- ionic/angularjs js -->15     <script src="http://www.mamicode.com/lib/ionic/js/ionic.bundle.js"></script>16 17     <!-- cordova script (this will be a 404 during development) -->18     <script src="http://www.mamicode.com/lib/ionic/js/ng-cordova.min.js"></script>19     <script src="http://www.mamicode.com/cordova.js"></script>20 21     <!-- your app‘s js -->22     <script src="http://www.mamicode.com/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: false14         };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 user20         });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="http://www.mamicode.com/{{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


联系
我们