使用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;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;240px;height:240px;" id="smallImage" src="" /> </body></html> |
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1146.html