介紹

cordova提供照相機API與裝置相機進行互動。

通過照相機API、我們可以拍攝或者訪問照片庫中的照片，返回圖片的base64編碼字串或者圖片的url檔案路徑。

安裝外掛

需要cordova 5.0以上版本

cordova plugin add cordova-plugin-camera

通過ID安裝舊版本的cordova

cordova plugin add org.apache.cordova.camera

當然，也可以通過下載直接新增：（不穩定）

cordova plugin add https://github.com/apache/cordova-plugin-camera.git

使用方法：

這個外掛定義了一個全域性的navigator.camera物件，它提供了一個API，用於拍照和從系統圖庫中選擇影象。

雖然物件是附加到全域性的navigator物件內，但是需要在deviceready事件之後才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.camera);
}

API 參考

navigator.camera.getPicture

使用camera.getPicture，可以呼叫裝置預設的攝像頭拍照，或從裝置相簿中獲取一張照片

。照片將以base64編碼的字串或圖片URI形式返回。

navigator.camera.getPicture的引數：

示例：

拍一張照片，並返回它的一個 base64 編碼的影象：

    navigator.camera.getPicture(onSuccess, onFail, { 
quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    });
    
    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }
    
    function onFail(message) {
        alert('Failed because: ' + message);
    }
 

拍一張照片和返回影象檔案的位置：

navigator.camera.getPicture(onSuccess, onFail, { 
quality: 50,
        destinationType: Camera.DestinationType.FILE_URI 
    });
    
    function onSuccess(imageURI) {
        var image = document.getElementById('myImage');
        image.src = imageURI;
    }
    
    function onFail(message) {
        alert('Failed because: ' + message);
    }

namera.cleanup()

移除掉中間影象檔案是呼叫camera.getPicture所儲存在臨時的儲存空間。

只適用於當Camera.sourceType的值=Camera.PictureSourceType.CAMERA和Camera.destinationType=Camera.DestinationType.FILE_URI。

Supported Platforms 支援平臺

· iOS

示例：

navigator.camera.cleanup(onSuccess, onFail);
function onSuccess() {
    console.log("Camera cleanup success.")
}
function onFail(message) {
    alert('Failed because: ' + message);
}

CameraError

onError 的回撥函式提供了一條錯誤資訊。

    function(message) {
        // Show a helpful message
    }

引數

message    訊息提供的裝置的本機程式碼

CameraSuccess

成功訪問圖片後的回撥函式，該函式的引數取值取決於destinationType的型別，如果destinationType是DATA_URI，則該引數返回Base64編碼的圖片資料；如果destinationType的FIEL_URI，則該引數返回的是圖片的URI。

不論是影象資料或者URI，都可以通過img標籤的src屬性顯示在網頁中，

如對於圖片資料imageData，通過給src屬性賦值”data:image/jpeg:base64,”+imageData即可，

而對於圖片URI imageURI，通過給src屬性直接賦值imageURI即可。

    function(imageData) {
        // Do something with the image
    }

引數

 imageData   Base64 編碼進行編碼的影象資料，或圖片檔案的 URI，取決於 `cameraOptions` 效果。

示例：返回的base64設定到img標籤中

    function cameraCallback(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }

CameraOptions

相機設定的可選引數。

名字	型別	預設值	描述
quality	number	50	影象的儲存質量，範圍0-100，100是最大值，最高的解析度，沒有任何壓縮損失（請注意有關該相機的解析度資訊不可用。）
destinationType	DestinationType	FILE_URI	選擇返回值的格式
sourceType	PictureSourceType	CAMERA	獲取圖片的來
allowEdit	Boolean	true	允許在選擇圖片之前進行簡單的編輯
encodingType	EncodingType	JPEG	選擇影象的返回編碼
targetWidth	number	寬度畫素用來縮放影象。必須和targetHeight一起使用。寬高比保持不變。
targetHeight	number	高度畫素用來縮放影象。必須和targetWidth一起使用。寬高比保持不變
mediaType	MediaType	PICTURE	選擇media型別。它只適用PictureSourceType是PHOTOLIBRARY或SAVEDPHOTOALBUM
correctOrientation	Boolean	如果是橫向拍攝的照片，會自動旋轉到正確的方向
saveToPhotoAlbum	Boolean	裝置拍照後的影象是否儲存的圖片庫中
popoverOptions	CameraPopoverOptions	僅ios可用，設定在ipad的popover的位置
cameraDirection	Direction	BACK	選擇前置攝像頭還是後置攝像頭

Camera.DestinationType :列舉 型別：相機的靜態列舉屬性 特性：

變數名	型別	預設值	描述
DATA_URL	number	0	返回Base64編碼的字串
FILE_URI	number	1	返回檔案的URI(content://media/external/images/media/2 for Android)
NATIVE_URI	number	2	返回原生URI (eg. asset-library://... for iOS)

Camera.EncodingType :列舉 型別：相機的靜態列舉屬性 特性：

變數名	型別	預設值	描述
JPEG	number	0	返回JPEG的圖片
PNG	number	1	返回PNG的圖片

Camera.MediaType :列舉 型別：相機的靜態列舉屬性 特性：

變數名	型別	預設值	描述
PICTURE	number	0	僅允許選擇靜態影像。 預設。將通過DestinationType返回指定格式
VIDEO	number	1	僅允許選擇視訊，只返回網址
ALLMEDIA	number	2	允許返回所有媒體格式

Camera.PictureSourceType :列舉 型別：相機的靜態列舉屬性 特性：

變數名	型別	預設值	描述
PHOTOLIBRARY	number	0	從裝置相簿選擇圖片
CAMERA	number	1	用攝像頭拍攝圖片
SAVEDPHOTOALBUM	number	2	從裝置相簿選擇圖片（一個應該是ios一個安卓）

Camera.PopoverArrowDirection :列舉 匹配的iOS UIPopoverArrowDirection在popover固定的箭頭位置。 型別：相機的靜態列舉屬性 特性：

變數名	型別	預設值
ARROW_UP	number	1
ARROW_DOWN	number	2
ARROW_LEFT	number	4
ARROW_RIGHT	number	8
ARROW_ANY	number	15

Camera.Direction :enum 型別：相機的靜態列舉屬性 特性：

變數名	型別	預設值	描述
BACK	number	0	使用後置攝像頭
FRONT	number	1	使用前置攝像頭

CameraPopoverOptions iOS特供，從iPad的系統相簿選擇圖片，指定popover的定位元素的位置箭頭方向和引數。需要注意的是popover的尺寸可以改變，以適應螢幕的箭頭和取向方向。確保指定元素位置時考慮方向變化。

變數名	型別	預設值	描述
[x]	number	0	螢幕選取框的x座標
[y]	number	32	螢幕選取框的y座標
[width]	number	320	螢幕選取框的寬度
[height]	number	480	螢幕選取框的高度
[arrowDir]	PopoverArrowDirection	ARROW_ANY	確定popover的指向

示例

示例一：使用camera外掛，從圖片庫中選擇圖片，返回base64編碼字串

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
        .line {
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id="openLabrary">按鈕</button></div>
    <div class="line"><img id="myImage" style="height: 200px;"></img></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js：

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    // deviceready Event Handler
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var _this = this;
        var getDomLabrary = this.$$('openLabrary');
        getDomLabrary.onclick = function(){
            // 開啟圖片庫
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,                                       // 相片質量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM, // 設定從圖片庫獲取
                destinationType: Camera.DestinationType.DATA_URL       // 以base64返回
            });
            function onSuccess(imageData) {
                console.log(imageData)
                _this.$$('myImage').src = "data:image/jpeg;base64," + imageData;
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    }
};

app.initialize();

執行：

點選按鈕，顯示相簿，選擇圖片

圖片被新增到頁面上

注意：

返回base64編碼字串是沒有data:image/jpeg;base64,頭部的！！！

示例二：

使用camera外掛，開啟攝像頭拍照，返回照片的檔案路徑，並顯示在頁面上

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
        .line {
            padding: 5px;
        }
        #myImage {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id="openLabrary">按鈕</button></div>
    <div class="line"><img id="myImage"></img></div>
    <div class="line"><span id="text"></span></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js：

var app = {
   initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },
   onDeviceReady: function() {
      this.receivedEvent();
   },
   $$: function(id) {
      return document.getElementById(id);
   },
   receivedEvent: function() {
      var getDomLabrary = this.$$('openLabrary');
      var _this = this;
      getDomLabrary.onclick = function() {
         // 開啟圖片庫
         navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,                                            // 相片質量是50
            sourceType: Camera.PictureSourceType.Camera,            // 設定從攝像頭拍照獲取
            destinationType: Camera.DestinationType.FILE_URI        // 以檔案路徑返回
         });

         function onSuccess(imageURI) {
             console.log(imageURI)
             _this.$$('myImage').src = imageURI;
             _this.$$('text').innerHTML = imageURI.substr(imageURI.lastIndexOf('/')+1);
         }

         function onFail(message) {
            alert('Failed because: ' + message);
         }
      }
   }
};

app.initialize();

執行：

點選按鈕，開啟照相機

拍照後會顯示一個扣扣，點選扣扣確認拍下的照片

顯示圖片到頁面上

備註：

camera外掛獲取了拍照的圖片的檔案路徑並返回

續上：

通過返回的圖片檔案路徑，獲取到圖片的base64編碼字串

使用這個函式就可以把圖片轉成base64

   // 把圖片轉成base64
   convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
         ctx = canvas.getContext('2d'),
         img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
         canvas.height = img.height;
         canvas.width = img.width;
         ctx.drawImage(img, 0, 0);
         var dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback.call(this, dataURL);
         canvas = null;
      };
      img.src = url;
   }

index.js：

var app = {
   initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },
   onDeviceReady: function() {
      this.receivedEvent();
   },
   $$: function(id) {
      return document.getElementById(id);
   },
   receivedEvent: function() {
      var getDomLabrary = this.$$('openLabrary');
      var _this = this;
      getDomLabrary.onclick = function() {
         // 開啟圖片庫
         navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,                                            // 相片質量是50
            sourceType: Camera.PictureSourceType.Camera,            // 設定攝像頭拍照獲取
            destinationType: Camera.DestinationType.FILE_URI        // 以檔案路徑返回
         });

         function onSuccess(imageURI) {
            console.log(imageURI)
            _this.$$('myImage').src = imageURI;
                _this.$$('text').innerHTML = imageURI.substr(imageURI.lastIndexOf('/')+1);

            // 轉base64
            _this.convertImgToBase64(imageURI, function(base64Img) {
               console.log(base64Img)
            });
         }

         function onFail(message) {
            alert('Failed because: ' + message);
         }
      }
   },
   // 把圖片轉成base64
   convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
         ctx = canvas.getContext('2d'),
         img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
         canvas.height = img.height;
         canvas.width = img.width;
         ctx.drawImage(img, 0, 0);
         var dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback.call(this, dataURL);
         canvas = null;
      };
      img.src = url;
   }
};

app.initialize();

注意：

拿到的base64編碼字串是有data:image/png;base64,頭部的！！！

小結：

提供以上2種方法，獲取base64編碼字串。

區別：

第1種方法獲取的base64編碼字串沒有data:image/png;base64,頭部

第2種方法獲取的base64編碼字串有data:image/png;base64,頭部

第2種方法還拿到了檔名。

示例三：

從相簿中獲取圖片，返回圖片在系統中的路徑

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <button id="openLabrary">按鈕</button>
            <img id="myImage" style="height: 200px;"></img>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

index.js：

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var getDomLabrary = this.$$('openLabrary');
        getDomLabrary.onclick = function(){
            // 開啟圖片庫
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,					// 相片質量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM,	// 設定從圖片庫獲取
                destinationType: Camera.DestinationType.FILE_URI	// 以檔案路徑返回
            });
            function onSuccess(imageURI) {
                 console.log(imageURI)
		_this.$$('myImage').src = imageURI;
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    }
};

app.initialize();

執行：

點選按鈕，開啟圖片庫，選擇圖片，顯示

續上：結合使用FileTransfer外掛上傳圖片

 index.js： 

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var getDomLabrary = this.$$('openLabrary');
        var _this = this;
        getDomLabrary.onclick = function(){
            // 開啟圖片庫
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,                                            // 相片質量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM,  // 設定從圖片庫獲取
                destinationType: Camera.DestinationType.FILE_URI        // 以檔案路徑返回
            });
            function onSuccess(imageURI) {
                console.log(imageURI)
                _this.$$('myImage').src = imageURI;

                // 上傳
                _this.upLoadImg(imageURI);
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    },
    // file-Transfer外掛，上傳圖片檔案
    upLoadImg(imageURI){
        var options = new FileUploadOptions();
        options.chunkedMode = false;
        options.fileKey = "file";
        options.fileName = imageURI.substring(imageURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";
        options.httpMethod = "POST";
        console.log("options=======");
        console.log(options);

        var fileTransfer = new FileTransfer();
        var successCallback = function(r){
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
        }
        var errorCallback = function (error) {
            console.log("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }
        fileTransfer.upload(
                    imageURI,   //本地檔案路徑
                    encodeURI("http:\/\/10.1.10.53:8089/oss/UploadServlet"),  //伺服器上傳的路徑
                    successCallback,  //成功的回撥
                    errorCallback,    //失敗的回撥
                    options);         //配置項
    }
};

app.initialize();

執行：

點選按鈕，開啟圖片庫，選擇圖片，顯示

上傳成功

備註：

這個上傳的伺服器路徑：

var SERVER = "http://10.1.10.53:8089/oss/UploadServlet"

使用了一個.jsp檔案寫成的

需要檢視fileTransfer外掛的使用方法，可以點選下面連結