Cordova - 使用Cordova开发iOS应用实战4（调用摄像头拍照，并编辑）

2016-04-20 发布：hangge 阅读：5679

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

一，添加camera插件

首先我们要在“终端”中进入工程所在的目录，然后运行如下命令：

1	`cordova plugin add cordova-plugin-camera`

可以看到camera相机插件已经成功添加了：

二，调用设备摄像头

1，拍照

下面样例会调用手机摄像头拍照（可以切换前置、后置摄像头），同时拍照完毕后会把照片在页面上显示出来。

<!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 即可。
下面样例可以看到，拍照完毕后会先进入编辑界面。上面有个正方形进行框，通过拖拽、缩放照片可以将其裁剪为正方形的图片（这个对需要使用正方形图片的场合比较有用，比如用户头像）。

<!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>

三、摄像头插件的常用参数
1，correctOrientation
有时我们发现拍摄后，照片显示出来的方向不对。可以将 correctOrientation 设置成 true，这样拍摄后插件会自动旋转照片，保证方向正确。

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                            destinationType: destinationType.DATA_URL 
                            correctOrientation: true}
                            );

2，saveToPhotoAlbum
设置成 true。拍照后会将照片自动保存到设备的系统相册中。

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                            destinationType: destinationType.DATA_URL 
                            saveToPhotoAlbum: true}
                            );

3，cameraDirection
拍摄时默认使用哪个摄像头。默认情况下是使用后置摄像头（Camera.Direction.BACK）。我们可以改成使用前置摄像头（Camera.Direction.FRONT）。

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                            destinationType: destinationType.DATA_URL 
                            cameraDirection: Camera.Direction.FRONT}
                            );

7楼

2016-11-01 20:05

好好学习

请问下，IOS的模拟器不能使用摄像头么？

站长回复：
嗯，必须使用真机才行。
6楼

2016-07-20 14:19

藕藕藕汀

嗯嗯多谢，是我的js写错了。遇到个问题就是图片下载的百分比的问题。自定义图片下载的插件，但是下载百分比不知道怎么样连续返回

站长回复：
下载的话为什么不直接使用Cordova的fileTransfer插件呢？这个还有实时进度返回。我原来写过相关文章：Cordova - fileTransfer插件的使用详解（实现文件上传、下载）
5楼

2016-07-13 14:48

藕藕藕汀

我自定义了一个cordova的插件，插件里面有多个方法，但是在插件的js文件中，多个方法的时候就会全部失效

站长回复：
一个插件里面肯定是允许有多个方法的，你说的失效问题应该是你插件js文件里写的有问题。再仔细检查下看看。
4楼

2016-06-07 14:46

666

站长威武！可以转么？

站长回复：
可以转载。转的时候记得要注明出处，并附上原文超链接。
3楼

2016-04-22 20:53

小华

谢谢站长回复，刚学cordova，看了你的文章真是受益匪浅，谢谢你提供这个平台和技术的分享。

站长回复：
不客气，欢迎常来看看。
2楼

2016-04-20 09:18

小华

再请教一下站长，怎么知道有调用摄像头cordova-plugin-camera这么一个插件，如果我想调用其他插件怎么查找？

站长回复：
在官网上可以搜索插件：http://cordova.apache.org/plugins/
比如可以搜：geolocation（定位插件），contacts（联系人插件）等等
1楼

2016-04-20 09:02

小华

看了使用Cordova开发iOS应用实战1（配置、开发第一个应用）之后，用hbuilder写了个登陆页面丢进去试了一下，哈哈，感觉挺不错的，昨天自己试了半天调摄像头没弄出来，今天就出教程了，马上试试，非常感谢。

站长回复：
不客气，我也很高兴我写的文章能帮助到你。