代码改变世界

Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)

2016-04-20 09:04 by 笨小宝, ... 阅读, ... 评论, 收藏, 编辑
使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可。

一,添加camera插件
首先我们要在“终端”中进入工程所在的目录,然后运行如下命令:
1
cordova plugin add cordova-plugin-camera
可以看到camera相机插件已经成功添加了:
原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)

原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)


二,调用设备摄像头
1,拍照
下面样例会调用手机摄像头拍照(可以切换前置、后置摄像头),同时拍照完毕后会把照片在页面上显示出来。
     原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)     原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)     原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)
     原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)     原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)
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 即可。
下面样例可以看到,拍照完毕后会先进入编辑界面。上面有个正方形进行框,通过拖拽、缩放照片可以将其裁剪为正方形的图片(这个对需要使用正方形图片的场合比较有用,比如用户头像)。
     原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)     原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)     原文:Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)
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