使用ionic开发一款android或ios应用，估计少不了使用到Camera API，这里记录下使用过程。

创建空的ionic应用

ionic start myTabs tabs

通过cd demo命令，可以看到已经为我们创建了多个文件夹，如下所示：

ls -l
total 48
-rw-r--r--  1 nancy  staff  2786  6  5 01:14 README.md
-rw-r--r--  1 nancy  staff   125  6  5 01:14 bower.json
-rw-r--r--  1 nancy  staff  1062  6  5 01:14 config.xml
-rw-r--r--  1 nancy  staff  1353  6  5 01:14 gulpfile.js
drwxr-xr-x  4 nancy  staff   136  6  5 01:14 hooks
-rw-r--r--  1 nancy  staff    73  6  5 01:12 ionic.project
-rw-r--r--  1 nancy  staff   356  6  5 01:14 package.json
drwxr-xr-x  3 nancy  staff   102  6  5 01:14 platforms
drwxr-xr-x  3 nancy  staff   102  6  5 01:14 plugins
drwxr-xr-x  3 nancy  staff   102  6  5 01:14 scss
drwxr-xr-x  6 nancy  staff   204  6  5 01:14 www

安装并使用Camera插件

在plugins文件夹中放着的是各个使用的插件，通过命令cordova plugin add 插件名来安装我们所需插件，安装Camera插件：

cordova plugin add org.apache.cordova.camera

使用Camera插件api

function takePicture() {navigator.camera.getPicture(function(imageURI) {// imageURI is the URL of the image that we can use for// an <img> element or backgroundImage.}, function(err) {// Ruh-roh, something bad happened}, cameraOptions);
}

创建service

在文件www/js/services.js中，通过添加angular service提供拍照服务：

.factory('Camera', ['$q', function($q) {return {getPicture: function(options) {var q = $q.defer();navigator.camera.getPicture(function(result) {// Do any magic you needq.resolve(result);}, function(err) {q.reject(err);}, options);return q.promise;}}
}])

其中，插件Camera说明，详见这里。

修改Controller，添加拍照按钮事件

我们修改Controllers.js中第一个controller（DashCtrl），如下：

.controller('DashCtrl', function($scope, Camera) {$scope.getPhoto = function() {Camera.getPicture().then(function(imageURI) {console.log(imageURI);$scope.lastPhoto = imageURI;}, function(err) {console.err(err);}, {quality: 75,targetWidth: 320,targetHeight: 320,saveToPhotoAlbum: false});};
})  

其中，quality、targetWidth、targetHeight等参数说明，见这里。

使用AngularJS Whitelisting

添加config：

module.config(function($compileProvider){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|  tel):/);
})

修改html，添加拍照按钮和返回照片

在www/templates/tab-dash.htm中添加拍照按钮和事件，并返回照片信息，显示：

<ion-view title="Dashboard"><ion-content class="has-header padding"><h1>Dash</h1><button ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button><img ng-src="{{lastPhoto}}" style="max-width: 100%"></ion-content>
</ion-view>

在android下运行

执行命令：

ionic build android
ionic run android

运行结果：

转自：http://www.yemeishu.com/using_camera/