使用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/

轉載于:https://www.cnblogs.com/yemeishu/p/3771077.html

總結

以上是生活随笔為你收集整理的Using the Cordova Camera API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。