使用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 need
q.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
運行結果：
