1、配置环境,配置调用摄像头所需要的插件ng-cordova
我是离线下载:http://ngcordova.com/docs/install/
2、引入ng-cordova.js文件
ng-cordova.js在步骤1或的包里面,路径:ng-cordova-master\dist
将ng-cordova.js引入到index.html中并放在cordova.js之前,AngularJS Ionic文件以后,因为之间存在依赖关系;
<script src="js/ng-cordova.js"></script>
<script src="js/cordova.js"></script>
3、在config配置中引入ng-cordova的依赖
angular.module(‘starter’,[‘ionic’,’ngCordova‘,’starter.controllers’,’starter.directive’,’starter.config’,’starter.services’,’ngResource’])
.config(function(
stateProvider,
urlRouterProvider,$ionicConfigProvider){
……
}
4、在相应的html中对应的controllers中使用,$cordovaCamera
angular.module('starter.controllers', ["ionic"])
.controller('homeController',function($scope,ENV,$cordovaCamera) {
$scope.title='首页';
$scope.name='homeController';
$scope.env=ENV;
$scope.goCamera=function(){
console.log('goCamera');
$scope.show_camera=true;
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false,
correctOrientation:true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
$scope.imageSrc="data:image/jpeg;base64," + imageData;
$scope.show_camera=false;
}, function(err) {
console.log("摄像头保存照片失败");
});
};
})
如上,goCamera()方法被ionic css中调用;
更多了解$cordovaCamera的使用,官方解释:
http://ngcordova.com/docs/plugins/camera/
5、上传一个实例,是phonegap100,树根老师讲的例子+自己写了调用摄像头的案例,给各位学习。以后还会添加功能,代码如下:
http://download.csdn.net/download/qq417431233/9487749