【小(xiǎo)編推薦】phonegap的(de)照(zhào)相(xiσ àng)機(jī)API

1. Camera Api簡單介紹
2. 拍(pāi)照(zhào)
3. 預覽照(zhào)片

一(yī)、 Camera Api簡單介紹


Camera選擇使用(yòng)攝像頭拍×<£ε(pāi)照(zhào)，或從(cóng)設備相(xi↓™€✔àng)冊中獲取一(yī)張照(zhào)片。圖片以base64編碼的(de€₽)
字符串或圖片URI形式返回。
方法：
1. camera.getPicture 拍(pāi)照(zhào)獲取相(x♠♠€✘iàng)冊圖片
navigator.camera.getPicture( cameraSu >↕δccess, cameraError, [ cameraOpt≥λ♠♣ions ] );
cameraSuccess：提供圖像數(shù)據的(d☆λβe)onSuccess回調函數(shù)。
cameraError：提供錯(cuò)誤信息的(de)onErro™✔♠r回調函數(shù)。
cameraOptions：定制(zhì)攝像頭設置的(de)可​≥(kě)選參數(shù)
2. camera.cleanup 清除拍(pāi)照(zhào)後設備的§∏(de)緩存圖片
navigator.camera.cleanup( cam→±∑eraSuccess, cameraError )≈≥;
3.cameraOptions參數(shù)：
定制(zhì)攝像頭設置的(de)可(kě)選參∑✔§ 數(shù)。
quality : 存儲圖像的(de)質量，範γ&‌圍是(shì)[0,100]。
destinationType :選擇返回‌¥≠數(shù)據的(de)格式。
sourceType :設定圖片來(lái)源。data:image/jα≤☆≠peg;base64,
allowEdit :在選擇圖片進行(xíng)操₽€↑作(zuò)之前允許對(duì)其進行(xíng)簡‍±≥單編輯。(好(hǎo)像隻有(yǒu)ios支持)
encodingType :選擇返回圖像文(wén)件(jiàn)↔α♥§的(de)編碼方encodingType: C§€₹amera.EncodingType.JP↔&↑↔EG
targetWidth :以像素為(wèi)單位的(de)↑₹圖像縮放(fàng)寬度指定圖片展示的(de)時(shí)候的(de)寬度
targetHeight :以像素為(wèi)單位的(de)圖像縮放(fànγ®g)高(gāo)度指定圖片展示的(de)時(Ω&↑♦shí)候的(de)高(gāo)度
saveToPhotoAlbum:拍(pāi)完照(zhào)片後 ®φ是(shì)否将圖像保存在設備上(shàng)的(de)相(x±¥iàng)冊
mediaType 設置選擇媒體(tǐ)的(de)類型
cameraDirection 選擇前置攝像頭還(↓→↕hái)是(shì)後置攝像頭
注意：在Android中。
忽略allowEdit參數(shù)。


Camera.PictureSourceType.P‍♠HOTOLIBRARY或
Camera.PictureSourceType.SAVEDPH>'OTOALBUM都(dōu)會(huì)顯示同一(yī)個(gè)相(x€δiàng)集。


. quality: Quality of the s×₩∞πaved image, expressed as a range of 0- <™>100, where 100
is typically full resoluti≠♥'on with no loss from file c↓≥₩↑ompression. (Number) (Note tha→≤ t
information about the¶ < camera's resolution is unavailab‌ le.)
. destinationType: Choose the format ofΩ​π the return value. Defined
in navigator.camera.DestinationType (∏←φ Number)


Camera.DestinationTyp✔←σe={
DATA_URL :0, // Retur±→n image as base64-encoded strin→✔∞‍g
FILE_URI :1, // Return imaφ∑β•ge file URI
NATIVE_URI :2 // Returφ→α☆n image native URI (e.g. assets-lΩ∑®πibrary://
on iOS or content:// ₽§↑on Android)
};

. sourceType: Set the sou πrce of the picture. Defineλ‍¶d
in navigator.camera.Picture  ÷SourceType (Number)


Camera.PictureSource≠≤♣Type={
PHOTOLIBRARY :0,//圖庫中εγ獲取
CAMERA :1,//設備照(zhào)相(xiàng)機(jī)​α♠•中獲取
SAVEDPHOTOALBUM :2//從(cóng)↑<‌'相(xiàng)冊中獲取
};

. allowEdit: Allow simple editin•ε∞g of image before selection. (Boolean)
. encodingType: Choose the retur£↕§ned image file's enc× §<oding. Defined
in navigator.camera.EncodingTy$✘pe (Number)


Camera.EncodingType={
JPEG :0, // Return JPEGπ↑£< encoded image
PNG :1 // Return PNG encoded← ← image
};

. targetWidth: Width in™→ pixels to scale image. Must be used wλ§ith targetHeight.





Aspect ratio remains constant. (Number≠♦β)
. targetHeight: Heighασt in pixels to scale image. Must b↑¶♥e used with targetWidth.
Aspect ratio remains constδ↓‌ant. (Number)
. mediaType: Set the type of med<₹ia to select from. Only worα♦↑↔ks
when PictureSourceType is PHO&✔<×TOLIBRARY or SAVEDPHOTOALBUM. Define∞≤d
in nagivator.camera.Me∞♦¶diaType (Number)


Camera.MediaType={
PICTURE:0, // allow selection ≠§of still pictures only. DEFAULT. W ♥ill
return format specified €βvia DestinationType
VIDEO:1, // allow sel§‌♥ection of video only, "★WILL ALWAYS RETURN
FILE_URI
ALLMEDIA :2 // allow selection fro§↑φ£m all media types
};

. correctOrientation: Rotate↑∞ the image to correct for t♦↔he orientation of the↑™ device
during capture. (Boolean)
. saveToPhotoAlbum: Save the imσ₩age to the photo album on the devi≈ ce after
capture. (Boolean)
. popoverOptions: iOS-< "only options that specify φ₹ popover location in iPad.±<
Defined in CameraPopoverOptions.
. cameraDirection: Choo÷​♣‍se the camera to use (fr✘ 'ont- or back-facing). Defined
in navigator.camera.Directio∏←•n (Number)


Camera.Direction={
BACK :0, // Use the back-fac®λ←βing camera
FRONT :1 // Use the front-facing ca♥≤≥↑mera
};

Android Quirks

. Ignores the allowEdit♦≠ parameter.
. Camera.PictureSourceType.PHOTOLIBRA™♥♥≤RY and Camera.Pictureπ↓SourceType.SAVEDPHOTOA☆∏σLBUM both display theΩ∞ same photo album.


 




 簡單的(de)列子(zǐ)：
1.拍(pāi)照(zhào)并獲取Base64編碼的(de)α±>圖像:

navigator.camera.getPi∑  cture(onSuccess, onFail, { qualit©♥σy: 50,
destinationType: Camera→♠$.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.get≠♦•±ElementById('myImage')£‌δ;
image.src = "data:image/j "₽peg;base64," + i ‍♦βmageData;
}
function onFail(message)φΩ∑ {
alert('Failed because: ' + message);
}




2.拍(pāi)照(zhào)并獲取圖像文(wén)件(jiàn)路>↑₹₩(lù)徑：

navigator.camera.getP λicture(onSuccess, onFail'β‍, { quality: 50,
destinationType: Camera.Destin×♣ationType.FILE_URI });
function onSuccess(image₩→URI) {
var image = document.≤λgetElementById('myImaβπ↓ ge');
image.src = imageURI•™♦δ;
}
function onFail(message) {
alert('Failed because: ∑‌>' + message);
}



3.一(yī)個(gè)完整的(de)例子(zǐ)：

<!DOCTYPE html>
<html>
<head>
<title>Capture Pho×↔εεto</title>
<script type="text/javascrσ​"ipt" charset=&qu≈∞ot;utf-8" src="±×™≤phonegap.js"></script>±β δ;
<script type="te≤<xt/javascript" char  set="utf-8">
varpictureSource; //圖片來(lái$ )源
vardestinationType; ∏≈¶≥//設置返回值的(de)格式
// 等待PhoneGap連接設備
document.addEventListener("dev•Ωβ♦iceready",onDeviceReady,fals>∞e);





 // PhoneGap準備就(jiù)緒，可(kě)以↕δ使用(yòng)！
function onDeviceReady() {
pictureSource=navigator.camera.PictureS$εourceType;
destinationType=navigato☆™r.camera.DestinationType;
}
// 當成功獲得(de)一(yī)張照(zhào)片的(de)Base64> 編碼數(shù)據後被調用(yòng)
function onPhotoDataSuccess(imageData) ↔Ω₹{
// 取消注釋以查看(kàn)Base64編碼的(​$↕de)圖像數(shù)據
// console.log(imageData);
// 獲取圖像句柄
varsmallImage = document.g∞↔etElementById('smallImag§≠e');
// 取消隐藏的(de)圖像元素
smallImage.style.dis← λ₹play = 'block';
// 顯示拍(pāi)攝的(de)照(zhào)片
// 使用(yòng)內(nèi)嵌CSS規則來(lái)‌$縮放(fàng)圖片
smallImage.src = "≠♥δdata:image/jpeg;base64," ≤≈+ imageData;
}
// 當成功得(de)到(dào)一(yī)張照(zhà$∞σ☆o)片的(de)URI後被調用(yòng)
function onPhotoURISuccess(im&πageURI) {
// 取消注釋以查看(kàn)圖片文(wén)件(jiàn)的(de)URε✘I
// console.log(imageURI≠φ);
// 獲取圖片句柄
varlargeImage = document.geγ$tElementById('largeImage');¶§∞≥
// 取消隐藏的(de)圖像元素
largeImage.style.display = 'block';"​
// 顯示拍(pāi)攝的(de)照(zhào)片
// 使用(yòng)內(nèi)嵌CSS規則來(lái)縮放φ​'(fàng)圖片
largeImage.src = imageURI;
}
// “Capture Photo”按鈕點擊事(sh→↔¥¥ì)件(jiàn)觸發函數(shù)
function capturePhoto(α♣€) {
// 使用(yòng)設備上(shàng)的(de)攝像頭拍(p≠★āi)照(zhào)，并獲得(de)Base64編碼字符串格式的(de)圖★ 像
navigator.camera.getPicture(onPhoto ≠←★DataSuccess, onFail,♥♦ ® { quality: 50 });




 }
// “Capture Editable λ ↑Photo”按鈕點擊事(shì)件(jiàn)$®♠觸發函數(shù)
function capturePhotoEdit() {
// 使用(yòng)設備上(shàng)的(de)攝像頭¥ ™拍(pāi)照(zhào)，并獲得(de)↑ λBase64編碼字符串格式的(de)可(kě)編輯圖像
navigator.camera.getPicture(onPhotoDa♦™↔γtaSuccess, onFail, { quality: 20,
allowEdit: true });
}
//“From Photo Libr™₽'>ary”/“From Ph♠×γ‌oto Album”按鈕點擊事(shì)件(jiàn)觸發函數(±↓₩shù)
function getPhoto(source) {
// 從(cóng)設定的(de)來(lái)δ•∏>源處獲取圖像文(wén)件(jiàn)URI
navigator.camera.getPicture(o£↔∑nPhotoURISuccess, onFa←αλ il, { quality: 50,
destinationType: destiπ→nationType.FILE_URI,sourceType: s"§♣'ource });
}
// 當有(yǒu)錯(cuò)誤發生(shēng©♠​≠)時(shí)觸發此函數(shù)
function onFail(mesage) {
alert('Failed because: ' + ∑→message);
}
</script>
</head>
<body>
<button"capturePh↑±÷→oto();">Capture Photo</b®"₩utton><br>
<button"capturePhotoEdit();&q₩©★₩uot;>Capture Editable Photo&★¥lt;/button><br>↕∑
<button"getPhoto(pictureSource.• ₽PHOTOLIBRARY);">From Photo
Library</button><br&↓™☆<gt;
<button"getPhoto(pi∏§ctureSource.SAVEDPHOTOALBUM)&÷;">From Photo
Album</button><≠✔$;br>
<img style="display:nonγ£γ★e;width:60px;height:60px;" •✔id="smallImage" src=&qu' €ot;" />
<img style="dis← γ$play:none;" id=&qu¶↕©φot;largeImage" src=&qδ≥∏uot;" />
</body>
</html>



 

二、 拍(pāi)照(zhào)


 
function getPictureFromCamera()
{




 navigator.came‍δ←ra.getPicture(onSuccess, onFail, { quaφ★lity: 50,destinationType:
Camera.DestinationType.DATA_URL,©πsourceType:navigator.cam☆ >σera.PictureSourceType.PHOTOLIBRARY ≥™™☆});
}




 

三、 預覽照(zhào)片


function getPictureFromePhotoLibβ×αrary()
{
navigator.camera.getεσ&Picture(onSuccessFromLib, on§​Fail, { allowEdit:true,qualit★♠y:
90,destinationType:Camera.'♥DestinationType.FILE_¶↑↔λURI ,sourceType:navigato<δr.camera.PictureSour↓®€ceType.PHOTOLIBRARY,targetHeight:288↓‍♦ε,targetWidth:288 });
function onSuccessFromLiΩ×<§b(imageURI)
{
alert("imageURI"↓≠→;+imageURI);
var image = document.getElementById✔♥←('myImage');
image.src = imageURI;
}
}