Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)
作者:hangge | 2016-04-20 08:40
使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可。
2,拍照并进行编辑
拍摄照片后我们还可以进行简单的编辑,只要把 allowEdit 参数设为 true 即可。
下面样例可以看到,拍照完毕后会先进入编辑界面。上面有个正方形进行框,通过拖拽、缩放照片可以将其裁剪为正方形的图片(这个对需要使用正方形图片的场合比较有用,比如用户头像)。
三、摄像头插件的常用参数
1,correctOrientation
有时我们发现拍摄后,照片显示出来的方向不对。可以将 correctOrientation 设置成 true,这样拍摄后插件会自动旋转照片,保证方向正确。
2,saveToPhotoAlbum
设置成 true。拍照后会将照片自动保存到设备的系统相册中。
3,cameraDirection
拍摄时默认使用哪个摄像头。默认情况下是使用后置摄像头(Camera.Direction.BACK)。我们可以改成使用前置摄像头(Camera.Direction.FRONT)。
一,添加camera插件
首先我们要在“终端”中进入工程所在的目录,然后运行如下命令:
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)
请问下,IOS的模拟器不能使用摄像头么?
站长回复:嗯,必须使用真机才行。
嗯嗯多谢,是我的js写错了。遇到个问题就是图片下载的百分比的问题。自定义图片下载的插件,但是下载百分比不知道怎么样连续返回
站长回复:下载的话为什么不直接使用Cordova的fileTransfer插件呢?这个还有实时进度返回。我原来写过相关文章:Cordova - fileTransfer插件的使用详解(实现文件上传、下载)
我自定义了一个cordova的插件,插件里面有多个方法,但是在插件的js文件中,多个方法的时候就会全部失效
站长回复:一个插件里面肯定是允许有多个方法的,你说的失效问题应该是你插件js文件里写的有问题。再仔细检查下看看。
站长威武!可以转么?
站长回复:可以转载。转的时候记得要注明出处,并附上原文超链接。
谢谢站长回复,刚学cordova,看了你的文章真是受益匪浅,谢谢你提供这个平台和技术的分享。
站长回复:不客气,欢迎常来看看。
再请教一下站长,怎么知道有调用摄像头cordova-plugin-camera这么一个插件,如果我想调用其他插件怎么查找?
站长回复:在官网上可以搜索插件:http://cordova.apache.org/plugins/
看了使用Cordova开发iOS应用实战1(配置、开发第一个应用)之后,用hbuilder写了个登陆页面丢进去试了一下,哈哈,感觉挺不错的,昨天自己试了半天调摄像头没弄出来,今天就出教程了,马上试试,非常感谢。
站长回复:不客气,我也很高兴我写的文章能帮助到你。