使用Cordova可以很方便的通過js代碼來使用設備攝像頭拍照，只需把camera插件添加進來即可。
可以看到camera相機插件已經成功添加了：
2，拍照並進行編輯
拍攝照片后我們還可以進行簡單的編輯，只要把 allowEdit 參數設為 true 即可。
下面樣例可以看到，拍照完畢后會先進入編輯界面。上面有個正方形進行框，通過拖拽、縮放照片可以將其裁剪為正方形的圖片（這個對需要使用正方形圖片的場合比較有用，比如用戶頭像）。
原文出自：www.hangge.com 轉載請保留原文鏈接：http://www.hangge.com/blog/cache/detail_1146.html
一，添加camera插件
首先我們要在“終端”中進入工程所在的目錄，然后運行如下命令：
|
1
|
cordova plugin add cordova-plugin-camera
|
二，調用設備攝像頭
1，拍照
下面樣例會調用手機攝像頭拍照（可以切換前置、后置攝像頭），同時拍照完畢后會把照片在頁面上顯示出來。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta http-equiv=
"Content-type"
content=
"text/html; charset=utf-8"
>
<script type=
"text/javascript"
charset=
"utf-8"
src=
"cordova.js"
></script>
<script type=
"text/javascript"
charset=
"utf-8"
>
var
destinationType;
document.addEventListener(
"deviceready"
,onDeviceReady,
false
);
//Cordova加載完成會觸發
function
onDeviceReady() {
destinationType=navigator.camera.DestinationType;
}
//拍照
function
capturePhoto() {
//拍照並獲取Base64編碼的圖像（quality : 存儲圖像的質量，范圍是[0,100]）
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL }
);
}
//拍照成功
function
onPhotoDataSuccess(imageData) {
console.log(imageData);
var
smallImage = document.getElementById(
'smallImage'
);
smallImage.style.display =
'block'
;
smallImage.src =
"data:image/jpeg;base64,"
+ imageData;
}
//拍照失敗
function
onFail(message) {
alert(
'拍照失敗: '
+ message);
}
</script>
</head>
<body style=
"padding-top:50px"
>
<button style=
"font-size:23px;"
onclick=
"capturePhoto();"
>拍攝照片</button> <br>
<img style=
"display:none;width:240px;height:320px;"
id=
"smallImage"
src=
""
/>
</body>
</html>
|
2，拍照並進行編輯
拍攝照片后我們還可以進行簡單的編輯，只要把 allowEdit 參數設為 true 即可。
下面樣例可以看到，拍照完畢后會先進入編輯界面。上面有個正方形進行框，通過拖拽、縮放照片可以將其裁剪為正方形的圖片（這個對需要使用正方形圖片的場合比較有用，比如用戶頭像）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta http-equiv=
"Content-type"
content=
"text/html; charset=utf-8"
>
<script type=
"text/javascript"
charset=
"utf-8"
src=
"cordova.js"
></script>
<script type=
"text/javascript"
charset=
"utf-8"
>
var
destinationType;
document.addEventListener(
"deviceready"
,onDeviceReady,
false
);
//Cordova加載完成會觸發
function
onDeviceReady() {
destinationType=navigator.camera.DestinationType;
}
//拍照並編輯
function
capturePhotoEdit() {
//拍照並獲取Base64編碼的圖像（quality : 存儲圖像的質量，范圍是[0,100]）
//allowEdit: true 拍照完畢后允許簡單編輯
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,
allowEdit:
true
,
destinationType: destinationType.DATA_URL });
}
//拍照成功
function
onPhotoDataSuccess(imageData) {
console.log(imageData);
var
smallImage = document.getElementById(
'smallImage'
);
smallImage.style.display =
'block'
;
smallImage.src =
"data:image/jpeg;base64,"
+ imageData;
}
//拍照失敗
function
onFail(message) {
alert(
'拍照失敗: '
+ message);
}
</script>
</head>
<body style=
"padding-top:50px"
>
<button style=
"font-size:23px;"
onclick=
"capturePhotoEdit();"
>拍照並編輯</button> <br>
<img style=
"display:none;width:240px;height:240px;"
id=
"smallImage"
src=
""
/>
</body>
</html>
|
原文出自：www.hangge.com 轉載請保留原文鏈接：http://www.hangge.com/blog/cache/detail_1146.html