使用Cordova可以很方便的通过js代码来使用设备摄像头拍照，只需把camera插件添加进来即可。

一，添加camera插件
首先我们要在“终端”中进入工程所在的目录，然后运行如下命令：
1
cordova plugin add cordova-plugin-camera

可以看到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

Cordova - 使用Cordova开发iOS应用实战4（调用摄像头拍照，并编辑）的更多相关文章

  1. Cordova - 使用Cordova开发iOS应用实战3（添加Cordova控制台插件）

    Cordova - 使用Cordova开发iOS应用实战3(添加Cordova控制台插件) 前文介绍了通过 Safari 的 Web检查器,可以看到控制台输出的信息.但有时这样调试代码不太方便,如果在 ...

  2. Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）

    Cordova - 使用Cordova开发iOS应用实战2(生命周期.使用Safari调试) 前文我们创建了一个简单的Cordova项目,结构如下: 1,Cordova生命周期事件 (1)device ...

  3. Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）

    Cordova - 使用Cordova开发iOS应用实战1(配置.开发第一个应用) 现在比较流行使用 html5 开发移动应用,毕竟只要写一套html页面就可以适配各种移动设备,大大节省了跨平台应用的 ...

  4. Cordova - 使用Cordova开发iOS应用实战5（获取手机里照片，并编辑）

    使用Cordova可以很方便的通过js代码读取系统相簿里面的照片,同使用设备摄像头拍照一样,同样需要先添加camera插件. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运 ...

  5. Swift开发iOS项目实战视频教程（一）---iOS真简单

    本课主要介绍iOS项目的创建.第一个iOS项目的开发.UILabel.UIButton的使用. 假设你看完此视频还认为iOS非常难,请你来找我! 本教程摒弃枯燥的语法和知识解说,全是有趣有料的项目实战 ...

  6. Swift开发iOS项目实战视频教程（二）---图片与动画

    本课主要介绍UIImageview.NSTimer的使用.并介绍了一种动画实现方式. 本教程摒弃枯燥的语法和知识解说.全是有趣有料的项目实战! 视频优酷链接:v.youku.com/v_show/id ...

  7. html5图片上传时IOS和Android均显示摄像头拍照和图片选择

    最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为 ...

  8. [Cordova] Plugin里使用iOS Framework

    [Cordova] Plugin里使用iOS Framework 前言 开发Cordova Plugin的时候,在Native Code里使用第三方Library,除了可以加速项目的时程.也避免了重复 ...

  9. vs2013update4 vs-mda-remote cordova真机测试ios

    1.升级vs2013到update4 2.下载安装vs_langpack-enu英语语言包 3.下载安装vs2013mda目前版本0.3.1 如果开发andorid,需要android sdk,ant ...

随机推荐

  1. Android按键事件处理流程 -- KeyEvent

    刚接触Android开发的时候,对touch.key事件的处理总是一知半解,一会是Activity里的方法,一会是各种View 中的,自己始终不清楚到底哪个在先哪个在后,总之对整个处理流程没能很好的把 ...

  2. 传统模式下WebService与WebAPI的相同与不同

    1.WebService是利用HTTP管道实现了RPC的一种规范形式,放弃了对HTTP原生特征与语义的完备支持:而WebAPI是要保留HTTP原生特征与语义的同时实现RPC,但WebAPI的实现风格可 ...

  3. substring -----截取字符串

    var str = "0123456789"; substring alert(str.substring(0));------------"0123456789&quo ...

  4. 让你脱离google不能访问的烦恼

    大陆封了google已有20多天了,给开发者带来了许多不便.只需两步让你的google可以使用: 1.设置hosts: 访问:https://git.oschina.net/kawaiiushio/m ...

  5. Java注释中TODO/FIXME/XXX的含义

    转自:http://free0007.iteye.com/blog/1886526 特殊注释: 1 TODO 表示需要实现,但目前还未实现的功能 2 XXX 勉强可以工作,但是性能差等原因 3 FIX ...

  6. spring listener监听器

    1.Listener的定义与作用 监听器Listener就是在application,session,request三个对象创建.销毁或者往其中添加修改删除属性时自动执行代码的功能组件. Listen ...

  7. java 生成和解析二维码

    public class QRCode { /** * 解析二维码(QRCode) * @param imgPath * @return */ public static String decoder ...

  8. Oracle表字段的增加、删除、修改和重命名

    本文主要是关于Oracle数据库表中字段的增加.删除.修改和重命名的操作. 增加字段语法:alter table tablename add (column datatype [default val ...

  9. EF Power Tools 数据库逆向生成时T4模板修改

    VS2013上使用EF Power Tools的Reverse Engineer Code First逆向生成. 发现数据库中的decimal(18, 4)字段在生成的mapping类中没有精度和小数 ...

  10. 001.libev安装及eclipse下添加libev库链接

    libev库安装: 1.下载页面:http://dist.schmorp.de/libev/ 当前版本下载: [root@mid_server ~]# cd /usr/local/src  [root ...