Using the Cordova Camera API

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

運行結果：

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