1. 程式人生 > >html5+ camera_image-攝像頭拍照

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>