相机拍摄和本地相册选择照片
一，安装ngCordova
bower install ngCordova --save-dev
二，引入ng-cordova.js文件
把ng-cordova.js或ng-cordova.min.js 引入到index.html中。
注意顺序：要放在cordova.js之前，AngularJS/ Ionic文件之后（ngCordova依赖AngularJS）
三，注入ng-cordova依赖
在主程序的app.js中引入ng-cordova依赖
angular.module('myApp',['ngCordova'])
四，添加插件到Cordova CLI环境中
一个较好的cordova插件清单链接 http://doc.wex5.com/cordova-plugins/
官网ng-cordova插件集合：http://ngcordova.com/docs/plugins/
eg.安装照相机插件
在项目的目录下，打开命令行，输入
$ cordova plugin add cordova-plugin-camera
查看已安装插件
$ cordova plugin ls
cordova-plugin-camera 2.1.1 "Camera"
五，camera插件的使用详情
1. 主js文件（app.js）中要有以下代码，这些功能是启动应用就要有。
angular.module('myApp',
[
'ionic',
'ngCordova',
'ionic-native-transitions',
'myApp.controllers',
'myApp.services',
'myApp.directives'
])
.run(function (
$ionicPlatform,
$timeout,
$rootScope,
$cordovaNetwork
) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
}
});
2.在需要使用的模块中注入$cordovaCamera服务
//点击换头像的方法
$scope.action.toChangeAvatar = function () {
var hideSheet = $ionicActionSheet.show({
buttons: [
{text: '拍照'},
{text: '从手机相册选择'}
],
cancelText: '取消',
cancel: function () {
},
buttonClicked: function (index) {
console.log(index);
if (index == '0') {
document.addEventListener("deviceready", function () {
//拍照
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: true,
correctOrientation: true
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.data.imageSrc = "data:image/jpeg;base64," + imageData;
}, function (err) {
// error
});
}, false);
} else if (index == '1') {
document.addEventListener("deviceready", function () {
//从手机相册选择
var options = {
destinationType: Camera.DestinationType.FILE_URI,
sourceType: 2, //设为0或2，调用的就是系统的图库
quality: 50,
allowEdit: true,
targetWidth: 200,
targetHeight: 200
};
$cordovaCamera.getPicture(options).then(function (imageURI) {
$scope.data.imageSrc = imageURI;
}, function (err) {
// error
});
//$cordovaCamera.cleanup().then(); // only for FILE_URI
}, false);
}
return true;
}
});
3.在视图上绑定
头像
![]()