相機

相機

camera物件提供對該設備的預設攝像頭應用程式的訪問。

重要的隱私注：圖像從一個設備觀景窗的收集和使用提出了重要的隱私問題。 您的應用程式的隱私權原則應該討論應用程式如何使用相機和是否與任何其他方共用錄製的影像。 此外，如果相機的應用程式的使用在使用者介面中不是明顯的應在您的應用程式訪問相機 （如果設備作業系統不會這樣做已經） 之前提供只是在時間的通知。 該通知應提供相同的資訊上文指出的並獲取該使用者的許可權 （例如，通過為確定並不感謝提出的選擇）。 有關詳細資訊，請參閱隱私指南。

方法

訪問功能

從 3.0 版，科爾多瓦作為外掛程式實現了設備級 Api。 使用 CLI 的 plugin 命令，描述在命令列介面，可以添加或刪除一個專案，為此功能：

    $ cordova plugin add org.apache.cordova.camera
    $ cordova plugin ls
    [ 'org.apache.cordova.camera' ]
    $ cordova plugin rm org.apache.cordova.camera

這些命令適用于所有有針對性的平臺，但修改如下所述的特定于平臺的配置設置：

引用：[為 Windows Phone 應用程式清單][1]

引用： [Tizen Web 應用程式的應用程式清單][2]

一些平臺可能支援此功能，而無需任何特殊的配置。請參見在概述部分中的平臺支援。

camera.getPicture

需要使用的相機，一張照片或從設備的圖像庫檢索一張照片。 圖像作為 base64 編碼傳遞成功回檔到 String ，或作為影像檔的 URI。 該方法本身返回 CameraPopoverHandle 可以用於重新置放檔選擇彈出的物件。

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

說明

camera.getPicture函數將打開該設備的預設攝像頭應用程式，使使用者能夠對齊圖片。 預設情況下，會發生此行為時 Camera.sourceType 等於 Camera.PictureSourceType.CAMERA 。 一旦使用者快照照片、 攝像頭應用程式關閉，並恢復該應用程式。

如果 Camera.sourceType 是 Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM ，然後允許使用者選擇一個現有圖像對話方塊的顯示。 camera.getPicture函數返回 CameraPopoverHandle 物件，可用於設備方向更改時重新置放圖像選擇對話方塊，例如。

傳回值發送到 cameraSuccess 回呼函數，根據指定的以下格式之一 cameraOptions ：

你可以做任何你想與編碼的圖像或 URI，例如：

注：在較新的設備上的照片解析度是相當不錯的。 從設備的庫選擇了照片不到較低的品質，壓縮螢幕使即使 quality 指定參數。 為了避免常見的記憶體問題，設置 Camera.destinationType 到 FILE_URI 而不是DATA_URL.

支援的平臺

Android 的怪癖

Android 使用意向啟動捕獲圖像，在設備上的相機活動和與低記憶體手機，科爾多瓦活動可能被殺。 在此方案中，可能不會顯示圖像還原科爾多瓦活動時。

iOS 的怪癖

包括 JavaScript alert() 中任一回檔的函數可能會導致問題。 換行內的警報 setTimeout() ，允許 iOS 圖像選取器或彈出要完全關閉之前警報將顯示：

setTimeout(function() {/ / 做你的事!}，0) ；

Windows Phone 7 的怪癖

調用本機攝像頭應用程式，同時通過 Zune 連接您的設備不工作，並觸發錯誤回檔。

Tizen 怪癖

Tizen 僅支援 destinationType 的 Camera.DestinationType.FILE_URI 和 sourceType 的Camera.PictureSourceType.PHOTOLIBRARY.

快速的示例

拍一張照片，並檢索它為 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);
}

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64-encoded image data
      // console.log(imageData);

      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI
      // console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

cameraSuccess

onSuccess 提供的圖像資料的回呼函數。

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

參數

示例

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

cameraError

onError 回呼函數的函數提供了一條錯誤訊息。

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

參數

cameraOptions

要自訂相機設置的可選參數。

{品質： 75，destinationType： Camera.DestinationType.DATA_URL，sourceType： Camera.PictureSourceType.CAMERA，allowEdit： 為 true，encodingType： Camera.EncodingType.JPEG，targetWidth： 100，targetHeight： 100，popoverOptions： CameraPopoverOptions，saveToPhotoAlbum： 虛假} ；

選項

};

Android 的怪癖

黑莓手機的怪癖

iOS 的怪癖

Tizen 怪癖

Windows Phone 7 和 8 怪癖

CameraPopoverOptions

iOS 僅指定彈出的錨元素的位置和箭頭方向，從 iPad 的庫或專輯選擇圖像時的參數。

{x: 0，y： 32，寬度： 320，高度： 480，arrowDir： Camera.PopoverArrowDirection.ARROW_ANY} ；

CameraPopoverOptions

請注意彈出的大小可能會更改箭頭的方向和螢幕的方向調整。 請確保帳戶方向更改時指定的錨點的元素位置。

快速的示例

 var popover = new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY);
 var options = {
     quality         : 50,
     destinationType : Camera.DestinationType.DATA_URL,
     sourceType      : Camera.PictureSource.SAVEDPHOTOALBUM,
     popoverOptions  : popover
 };

 navigator.camera.getPicture(onSuccess, onFail, options);

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

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

CameraPopoverHandle

由創建的彈出對話方塊的控制碼camera.getPicture.

方法

支援的平臺

setPosition

設置彈出的位置。

參數：

快速的示例

 var cameraPopoverOptions = new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY);
 cameraPopoverHandle.setPosition(cameraPopoverOptions);

完整的示例

 function onSuccess(imageData) {
      // Do stuff with the image!
 }

 function onFail(message) {
     alert('Failed to get the picture: ' + message);
 }

 var cameraPopoverHandle = navigator.camera.getPicture(onSuccess, onFail,
     { destinationType: Camera.DestinationType.FILE_URI,
       sourceType: Camera.PictureSourceType.PHOTOLIBRARY });

 // Reposition the popover if the orientation changes.
 window.onorientationchange = function() {
     var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, 0);
     cameraPopoverHandle.setPosition(cameraPopoverOptions);
 }