標籤:
本文將介紹PhoneGap API——Camera:使用裝置的網路攝影機採集照片,對象提供對裝置預設網路攝影機應用程式的訪問。
方法:
camera.getPicture
參數:
cameraSuccess
cameraError
cameraOptions
camera.getPicture
選擇使用網路攝影機拍照,或從裝置相簿中擷取一張照片。圖片以base64編碼的字串或圖片URI形式返回。
簡單的範例:
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。
支援的平台:
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, 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>
cameraSuccess
提供映像資料的onSuccess回呼函數。
function(imageData) { // 對映像進行處理 }
參數:
imageData:根據cameraOptions的設定值,為Base64編碼的映像資料或影像檔的URI。(字串類型)
範例:
// 顯示圖片 function cameraCallback(imageData) { var image = document.getElementById(‘myImage‘); image.src = "data:image/jpeg;base64," + imageData; }
cameraError
提供錯誤資訊的onError回呼函數。
function(message) { // 顯示有用資訊 }
參數:
message:裝置本地代碼提供的錯誤資訊。(字串類型)
cameraOptions
定製網路攝影機設定的選擇性參數。
{ quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType : Camera.EncodingType.JPEG, targetWidth : 100, targetHeight : 100};
選項:
quality:儲存映像的品質,範圍是[0,100]。(數字類型)
destinationType:選擇返回資料的格式。通過navigator.camera.DestinationType進行定義。(數字類型)
Camera.DestinationType = { DATA_URL : 0, //返回Base64編碼字串的映像資料 FILE_URI : 1 //返回影像檔的URI }
sourceType:設定圖片來源。通過nagivator.camera.PictureSourceType進行定義。(數字類型)
Camera.PictureSourceType = { PHOTOLIBRARY : 0, CAMERA : 1, SAVEDPHOTOALBUM : 2 }
allowEdit:在選擇圖片進行操作之前允許對其進行簡單編輯。(布爾類型)
EncodingType:選擇返回影像檔的編碼方式,通過navigator.camera.EncodingType進行定義。(數字類型)
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的介面來刪除該目錄。
原文來自:http://mobile.51cto.com/others-308272.htm#cameraSuccess
PhoneGap API介紹:Camera