- cmd進入phoneGap創建的工程目錄
- 進入plugins文件夾cd plugins
- 開始下載插件cordova plugin add org.apache.cordova.camera
等待安裝結束
調用相機的例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport"
content="width=device-width, minimum-scale=1, maximum-scale=1">
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; //設定圖片來源
var destinationType; //選擇返回數據的格式
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova準備好了可以使用了
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
function onPhotoDataSuccess(imageData) {
// base64 encoded image data
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
//在使用base64編碼的時候需要使用這樣的前綴
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// image file URI
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
//使用image file URI 直接賦值就可以了
largeImage.src = imageURI;
}
// 第一個按鈕調用函數
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality : 50,
destinationType : destinationType.DATA_URL
});
}
//第二個按鈕調用的函數
function capturePhotoEdit() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality : 20,
allowEdit : true,
destinationType : destinationType.DATA_URL
});
}
//第三/四個按鈕調用的函數
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality : 50,
destinationType : destinationType.FILE_URI,
sourceType : source
});
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button οnclick="capturePhoto();">Capture Photo</button>
<br>
<button οnclick="capturePhotoEdit();">Capture Editable Photo</button>
<br>
<button οnclick="getPhoto(pictureSource.PHOTOLIBRARY);">From
Photo Library</button>
<br>
<button οnclick="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>
