PhoneGap API幫助文檔翻譯Camera攝像頭

作者：佚名 2011-09-13 15:51:11

PhoneGap API幫助文檔翻譯Camera攝像頭是本文要介紹的內容，主要是來了解并學習PhoneGap API文檔的內容，具體關于PhoneGap API文檔內容的詳解來看本文。

PhoneGap API幫助文檔翻譯Camera攝像頭是本文要介紹的內容，主要是來了解并學習PhoneGap API文檔的內容，具體關于PhoneGap API文檔內容的詳解來看本文，camera對象提供對設備默認攝像頭應用程序的訪問。

方法：

camera.getPicture

參數：

cameraSuccess  
cameraError  
cameraOptions

camera.getPicture

選擇使用攝像頭拍照，或從設備相冊中獲取一張照片。圖片以base64編碼的字符串或圖片URI形式返回。

簡單的范例：

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

說明：

camera.getPicture函數打開設備的默認攝像頭應用程序，使用戶可以拍照（如果 Camera.sourceType 設置為 Camera.PictureSourceType.CAMERA，這也是默認值）。一旦拍照結束，攝像頭應用程序會關閉并恢復用戶應用程序。

如果Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM，系統彈出照片選擇對話框，用戶可以從相集中選擇照片。

返回值會按照用戶通過cameraOptions參數所設定的下列格式之一發送給cameraSuccess回調函數：

一個字符串，包含Base64編碼的照片圖像（默認情況）。

一個字符串，表示在本地存儲的圖像文件位置。

你可以對編碼的圖片或URI做任何處理，例如：

通過標簽渲染圖片（參看后續范例）

存儲為本地數據（LocalStorage，Lawnchair*等）

將數據發送到遠程服務器

備注：較新的設備上使用攝像頭拍攝的照片的質量是相當不錯的，使用Base64對這些照片進行編碼已導致其中的一些設備出現內存問題（如IPHONE4、BlackBerry Torch 9800）。因此，強烈建議將“Camera.destinationType”設為FILE_URI。

PhoneGap API支持的平臺：

Android

BlackBerry WebWorks (OS 5.0或更高版本)

iOS

簡單的范例：

拍照并獲取Base64編碼的圖像：

navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });    
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 });  
 
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);    
}    
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="phonegap.js"></script>    
<script type="text/javascript" charset="utf-8">    
    
    var pictureSource;      //圖片來源    
    var destinationType;        //設置返回值的格式    
        
    // 等待PhoneGap連接設備    
    document.addEventListener("deviceready",onDeviceReady,false);    
        
    // PhoneGap準備就緒，可以使用！    
    function onDeviceReady() {    
        pictureSource=navigator.camera.PictureSourceType;    
        destinationType=navigator.camera.DestinationType;    
    }    
        
    // 當成功獲得一張照片的Base64編碼數據后被調用    
    function onPhotoDataSuccess(imageData) {    
        
        // 取消注釋以查看Base64編碼的圖像數據    
        // console.log(imageData);    
        // 獲取圖像句柄    
        var smallImage = document.getElementById('smallImage');    
                 
        // 取消隱藏的圖像元素    
        smallImage.style.display = 'block';    
            
        // 顯示拍攝的照片    
        // 使用內嵌CSS規則來縮放圖片    
        smallImage.src = "data:image/jpeg;base64," + imageData;    
    }    
           
   // 當成功得到一張照片的URI后被調用    
   function onPhotoURISuccess(imageURI) {    
        
        // 取消注釋以查看圖片文件的URI    
        // console.log(imageURI);    
        // 獲取圖片句柄    
        var largeImage = document.getElementById('largeImage');    
             
        // 取消隱藏的圖像元素    
        largeImage.style.display = 'block';    
        
        // 顯示拍攝的照片    
        // 使用內嵌CSS規則來縮放圖片    
        largeImage.src = imageURI;    
    }    
           
   // “Capture Photo”按鈕點擊事件觸發函數    
   function capturePhoto() {    
    
        // 使用設備上的攝像頭拍照，并獲得Base64編碼字符串格式的圖像    
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });    
   }    
       
   // “Capture Editable Photo”按鈕點擊事件觸發函數    
   function capturePhotoEdit() {    
    
        // 使用設備上的攝像頭拍照，并獲得Base64編碼字符串格式的可編輯圖像    
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });    
   }    
           
   //“From Photo Library”/“From Photo Album”按鈕點擊事件觸發函數    
   function getPhoto(source) {    
       
        // 從設定的來源處獲取圖像文件URI    
        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,    
        destinationType: destinationType.FILE_URI,sourceType: source });    
   }    
    
   // 當有錯誤發生時觸發此函數    
   function onFail(mesage) {    
        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>    
<!DOCTYPE html> 
<html> 
<head> 
<title>Capture Photo</title> 
 
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
<script type="text/javascript" charset="utf-8"> 
 
 var pictureSource;  //圖片來源  
 var destinationType;  //設置返回值的格式  
   
 // 等待PhoneGap連接設備  
 document.addEventListener("deviceready",onDeviceReady,false);  
   
 // PhoneGap準備就緒，可以使用！  
 function onDeviceReady() {  
  pictureSource=navigator.camera.PictureSourceType;  
  destinationType=navigator.camera.DestinationType;  
 }  
   
 // 當成功獲得一張照片的Base64編碼數據后被調用  
 function onPhotoDataSuccess(imageData) {  
   
  // 取消注釋以查看Base64編碼的圖像數據  
  // console.log(imageData);  
  // 獲取圖像句柄  
  var smallImage = document.getElementById('smallImage');  
      
  // 取消隱藏的圖像元素  
  smallImage.style.display = 'block';  
    
  // 顯示拍攝的照片  
  // 使用內嵌CSS規則來縮放圖片  
  smallImage.src = "data:image/jpeg;base64," + imageData;  
 }  
      
   // 當成功得到一張照片的URI后被調用  
   function onPhotoURISuccess(imageURI) {  
   
  // 取消注釋以查看圖片文件的URI  
  // console.log(imageURI);  
  // 獲取圖片句柄  
  var largeImage = document.getElementById('largeImage');  
     
  // 取消隱藏的圖像元素  
  largeImage.style.display = 'block';  
   
  // 顯示拍攝的照片  
  // 使用內嵌CSS規則來縮放圖片  
  largeImage.src = imageURI;  
 }  
      
   // “Capture Photo”按鈕點擊事件觸發函數  
   function capturePhoto() {  
 
  // 使用設備上的攝像頭拍照，并獲得Base64編碼字符串格式的圖像  
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });  
   }  
     
   // “Capture Editable Photo”按鈕點擊事件觸發函數  
   function capturePhotoEdit() {  
 
  // 使用設備上的攝像頭拍照，并獲得Base64編碼字符串格式的可編輯圖像  
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });  
   }  
      
   //“From Photo Library”/“From Photo Album”按鈕點擊事件觸發函數  
   function getPhoto(source) {  
     
     // 從設定的來源處獲取圖像文件URI  
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,  
  destinationType: destinationType.FILE_URI,sourceType: source });  
   }  
 
   // 當有錯誤發生時觸發此函數  
   function onFail(mesage) {  
  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) {    
   // 對圖像進行處理    
}    
function(imageData) {  
   // 對圖像進行處理  
}

PhoneGap API參數：

imageData：根據cameraOptions的設定值，為Base64編碼的圖像數據或圖像文件的URI。（字符串類型）

PhoneGap API范例：

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

cameraError

提供錯誤信息的onError回調函數。

function(message) {    
   // 顯示有用信息    
}    
function(message) {  
   // 顯示有用信息  
}

PhoneGap API參數：

message：設備本地代碼提供的錯誤信息。（字符串類型）

cameraOptions

定制攝像頭設置的可選參數。

{   quality : 75,    
    destinationType : Camera.DestinationType.DATA_URL,    
    sourceType : Camera.PictureSourceType.CAMERA,    
    allowEdit : true,    
    encodingType : Camera.EncodingType.JPEG,    
    targetWidth : 100,    
    targetHeight : 100};    
{ quality : 75,  
 destinationType : Camera.DestinationType.DATA_URL,  
 sourceType : Camera.PictureSourceType.CAMERA,  
 allowEdit : true,  
 encodingType : Camera.EncodingType.JPEG,  
 targetWidth : 100,  
 targetHeight : 100  
};

PhoneGap API選項：

quality：存儲圖像的質量，范圍是[0,100]。（數字類型）

destinationType：選擇返回數據的格式。通過navigator.camera.DestinationType進行定義。（數字類型）

Camera.DestinationType = {   
 
    DATA_URL : 0,   //返回Base64編碼字符串的圖像數據    
    FILE_URI : 1    //返回圖像文件的URI    
}    
Camera.DestinationType = {  
 DATA_URL : 0, //返回Base64編碼字符串的圖像數據  
 FILE_URI : 1 //返回圖像文件的URI  
}

sourceType：設定圖片來源。通過nagivator.camera.PictureSourceType進行定義。（數字類型）

Camera.PictureSourceType = {    
    PHOTOLIBRARY : 0,    
    CAMERA : 1,    
    SAVEDPHOTOALBUM : 2    
}    
Camera.PictureSourceType = {  
 PHOTOLIBRARY : 0,  
 CAMERA : 1,  
 SAVEDPHOTOALBUM : 2  
}

allowEdit：在選擇圖片進行操作之前允許對其進行簡單編輯。（布爾類型）

EncodingType：選擇返回圖像文件的編碼方式，通過navigator.camera.EncodingType進行定義。（數字類型）

Camera.EncodingType = {    
    JPEG : 0,       // 返回JPEG格式圖片    
    PNG : 1         // 返回PNG格式圖片    
};    
Camera.EncodingType = {  
 JPEG : 0,  // 返回JPEG格式圖片  
 PNG : 1   // 返回PNG格式圖片  
};

targetWidth：以像素為單位的圖像縮放寬度，必須和targetHeight同時使用。相應的寬高比保持不變。（數字類型）

targetHeight：以像素為單位的圖像縮放高度，必須和targetWidth同時使用。相應的寬高比保持不變。（數字類型）

Android的特異情況：

忽略allowEdit參數。

Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM 都會顯示同一個相集。

Camera.EncodingType不被支持。

BlackBerry的特異情況：

忽略quality參數。

忽略sourceType參數。

忽略allowEdit參數。

當拍照結束后，應用程序必須有按鍵注入權限才能關閉本地Camera應用程序。

使用大圖像尺寸，可能會導致新近帶有高分辨率攝像頭的型號設備無法對圖像進行編碼（如：Torch 9800）。

Palm的特異情況：

忽略quality參數。

忽略sourceType參數。

忽略allowEdit參數。

iPhone的特異情況：

為了避免部分設備上出現內存錯誤，quality的設定值要低于50。

當使用destinationType.FILE_URI時，使用攝像頭拍攝的和編輯過的照片會存儲到應用程序的Documents/tmp目錄。

應用程序結束的時候，應用程序的Documents/tmp目錄會被刪除。如果存儲空間大小非常關鍵的時候，開發者也可以通過navigator.fileMgr的接口來刪除該目錄。

小結：PhoneGap API幫助文檔翻譯Camera攝像頭的內容介紹完了，希望通過PhoneGap API文檔內容的學習能對你有所幫助！如果想要繼續深入了解并學習PhoneGap API文檔的內容，請參考編輯推薦。

責任編輯：zhaolei 來源：互聯網

PhoneGap API