使用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. 2、CSS学习 - IT软件人员学习系列文章

    上文我们讲了HTML,本文讲讲CSS. 上次我们讲了CSS是HTML页面的装修部分,就是各种瓷砖.粉墙.说明了CSS在HTML页面中的重要地位.没有CSS,那么HTML页面将很粗糙,就象我们的毛坯房一 ...

  2. png-8 和 png-24的区别

    png是一种图片格式,是Portable Networks Graphics的缩写,做ping. png8和png24的区别如下. 1 "PNG8"是指8位索引色位图," ...

  3. yii2 输出xml格式数据

    作者:白狼 出处:http://www.manks.top/yii2_xml_response.html.html本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文 ...

  4. 基于分布式、服务化的maven项目文件规划

    引言 此文不是纯粹介绍maven概念,而是介绍一个具体的maven项目文件规划 这个规划可能适合于研发比较复杂的业务,这些业务有分布式和服务化的需要. 这个规划能够解决因为分布式和服务化要求而引起的项 ...

  5. Aforge.net之旅——开篇：从识别验证码开始

    时间过得真快啊,转眼今年就要过去了,大半年都没有写博客了,要说时间嘛,花在泡妹子和搞英语去了,哈哈...前几天老大问我 怎么这么长时间都没写博客了,好吧,继续坚持,继续分享我的心得体会. 这个系列我们 ...

  6. Java NIO 同步非阻塞

    同步非阻塞IO (NIO) NIO是基于事件驱动思想的,实现上通常采用Reactor(http://en.wikipedia.org/wiki/Reactor_pattern)模式,从程序角度而言,当 ...

  7. java 生成和解析二维码

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

  8. 【SQL篇章】【SQL语句梳理 :--基于MySQL5.6】【已梳理：ALTER TABLE解析】

    ALTER TABLE 解析实例: SQL: 1.增加列 2.增加列,调整列顺序 3.增加索引 4.增加约束 5.增加全文索引FULL-TEXT 6.改变列的默认值 7.改变列名字(类型,顺序) 8. ...

  9. 【转】RHadoop实践系列之二：RHadoop安装与使用

    RHadoop实践系列之二:RHadoop安装与使用 RHadoop实践系列文章,包含了R语言与Hadoop结合进行海量数据分析.Hadoop主要用来存储海量数据,R语言完成MapReduce 算法, ...

  10. Drupal7网站+IIS7.0+PHP+MySql

    .服务器系统环境 Windows Server R2 Enterprise 64位操作系统 .所需软件 IIS7 PHPManager http://phpmanager.codeplex.com/r ...