首页 > 代码库 > ionic ngcordova camera
ionic ngcordova camera
拍照是經常用到的,所以記錄一下 拍照的代碼...
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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。