使用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. redis配置文件参数说明及命令操作

    redis下载地址:https://github.com/MSOpenTech/redis/releases. Redis 的配置文件位于 Redis 安装目录下,文件名为redis.windows. ...

  2. ThinkPHP的RBAC原理分析

    转载 http://jingyan.baidu.com/article/a948d65151a4810a2ccd2e60.html 方法/步骤 多用户对节点的操作的权限控制,这句话,经过反复扩展功能, ...

  3. Strange Problem O(∩_∩)O~

    题目描述: 古代某个狱卒某天闲着没事想和两个罪犯玩个游戏,他找了个国际象棋盘,每个格子放上一个硬币,硬币长得都一样,正反都是狱卒自己决定. 之后他只让A罪犯观看棋盘,并随便指一个硬币告诉A罪犯,只要B ...

  4. DIV+CSS实现左侧带三角形的提示框

    实现效果

  5. Asp.net MVC验证那些事（4）-- 自定义验证特性

    在项目的实际使用中,MVC默认提供的Validation Attribute往往不够用,难以应付现实中复杂多变的验证需求.比如, 在注册用户的过程中,往往需要用户勾选”免责声明”,这个checkbox ...

  6. [Linux 性能检测工具]IOSTAT

    IOSTAT NAME:          Iostat, 报告CPU的统计,和 I/O的统计. 语法: iostat  [ -c ] [ -d ] [ -N ] [ -n ] [ -h ] [ -k ...

  7. PHP代码规范

    PHP编码规范 1. 标识符命名规范 标识符的命名力求做到统一.达意和简洁. 1.1 统一 统一是指,对于同一个概念,在程序中用同一种表示方法,比如对于供应商,既可以用supplier,也可以用pro ...

  8. 通过mdf ldf文件还原数据库

    新建查询,执行如下语句: EXEC sp_attach_db @dbname = 'xxx', /*数据库名称*/ @filename1 = 'D:\数据库备份\预发布\201611241045 测试 ...

  9. Windows下用Codeblocks建立一个最简单的DLL动态链接库

    转自:http://blog.csdn.net/wangwei_cq/article/details/8187576 来源:http://hi.baidu.com/hellosim/item/9ae4 ...

  10. nice

    我们在使用$top的时候有一列NI参数,这个参数就是进程的nice值,用来表示进程在系统调度中的优先级,Linux中的进程nice从-20到+19,越小表明调度的优先级越高,用户进程的最小nice值就 ...