html5+ camera_image-攝像頭拍照
camera 攝像頭拍照/攝像
Camera模組管理裝置的攝像頭,可用於拍照、攝像操作,通過plus.camera獲取攝像頭管理物件。
方法:
物件:
回撥方法:
許可權:
5+功能模組(permissions)
{
// ...
"permissions":{
// ...
"Camera": {
"description": "攝像頭"
}
}
}
Camera
攝像頭物件
interface Camera { readonly attribute String[] supportedImageResolutions; readonly attribute String[] supportedVideoResolutions; readonly attribute String[] supportedImageFormats; readonly attribute String[] supportedVideoFormats; function void captureImage( successCB, errorCB, option ); function void startVideoCapture( successCB, errorCB, option ); function void stopVideoCapture(); }
屬性:
方法:
CameraOption
JSON物件,呼叫攝像頭的引數
interface CameraOption {
attribute String filename;
attribute String format;
attribute String index;
attribute PopPosition popover;
}
屬性:
-
filename: _(String 型別 )_拍照或攝像檔案儲存的路徑
可設定具體檔名(如"_doc/camera/a.jpg");也可只設置路徑,以"/“結尾則表明是路徑(如”_doc/camera/")。如未設定檔名稱或設定的檔名衝突則檔名由程式程式自動生成。
-
format: _(String 型別 )_拍照或攝像的檔案格式
可通過Camera物件的supportedImageFormats或supportedVideoFormats獲取,如果設定的引數無效則使用系統預設值。
-
index: _(String 型別 )_拍照或攝像預設使用的攝像頭
拍照或攝像介面預設使用的攝像頭編號,1表示主攝像頭,2表示輔攝像頭。
-
popover: _(PopPosition 型別 )_拍照或攝像介面彈出指示區域
對於大螢幕裝置如iPad,拍照或攝像介面為彈出視窗,此時可通過此引數設定彈出視窗位置,其為JSON物件,格式如{top:“10px”,left:“10px”,width:“200px”,height:“200px”},預設彈出位置為螢幕居中。
PopPosition
JSON物件,彈出拍照或攝像介面指示位置
屬性:
-
top: _(String 型別 )_指示區域距離容器頂部的距離
彈出拍照或攝像視窗指示區域距離容器頂部的距離,支援畫素值(如"100px")和百分比(如"50%")。
-
left: _(String 型別 )_指示區域距離容器左側的距離
彈出拍照或攝像視窗指示區域距離容器左側的距離,支援畫素值(如"100px")和百分比(如"50%")。
-
width: _(String 型別 )_指示區域的寬度
彈出拍照或攝像視窗指示區域的寬度,支援畫素值(如"100px")和百分比(如"50%")。
-
height: _(String 型別 )_指示區域的高度
彈出拍照或攝像視窗指示區域的高度,支援畫素值(如"100px")和百分比(如"50%")。
CameraSuccessCallback
呼叫攝像頭操作成功回撥
void onSuccess( capturedFile ) {
// Caputre image/video file code.
}
說明:
呼叫攝像頭操作成功的回撥函式,在拍照或攝像操作成功時呼叫,用於返回圖片或視訊檔案的路徑。
引數:
- capturedFile: ( String ) 必選 拍照或攝像操作儲存的檔案路徑
返回值:
void : 無
CameraErrorCallback
攝像頭操作失敗回撥
void onError( error ) {
// Handle camera error
var code = error.code; // 錯誤編碼
var message = error.message; // 錯誤描述資訊
}
引數:
- error: ( Exception ) 必選 攝像頭操作的錯誤資訊 可通過error.code(Number型別)獲取錯誤編碼; 可通過error.message(String型別)獲取錯誤描述資訊。
返回值:
void : 無
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Hello H5+</title>
<script type="text/javascript">
var w = null;
// H5 plus事件處理
function plusReady() {}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
function imgLoaded() {
w && (w.close(), w = null);
var b = document.body;
var img = document.getElementById('img');
var pb = b.clientHeight / b.clientWidth,
pi = img.clientHeight / img.clientWidth;
if (pb > pi) {
img.style.width = '100%';
} else {
img.style.height = '100%';
}
b.style.lineHeight = b.clientHeight + 'px';
}
function imgError() {
w && (w.close(), w = null);
document.getElementById('img').style.display = 'none';
plus.nativeUI.alert('無效的圖片資源', function () {
back();
});
}
function loadMedia(src) {
document.getElementById('img').src = src;
}
</script>
</head>
<body style="text-align:center;background:#000000;">
<img id="img" onclick="back()" onload="imgLoaded()" onerror="imgError()" />
</body>
</html>