Cordova - 使用Cordova开发iOS应用实战4（调用摄像头拍照，并编辑）
|
1
|
cordova plugin add cordova-plugin-camera |
可以看到camera相机插件已经成功添加了：
|
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（调用摄像头拍照，并编辑）的更多相关文章
- Cordova - 使用Cordova开发iOS应用实战3（添加Cordova控制台插件）
Cordova - 使用Cordova开发iOS应用实战3(添加Cordova控制台插件) 前文介绍了通过 Safari 的 Web检查器,可以看到控制台输出的信息.但有时这样调试代码不太方便,如果在 ...
- Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）
Cordova - 使用Cordova开发iOS应用实战2(生命周期.使用Safari调试) 前文我们创建了一个简单的Cordova项目,结构如下: 1,Cordova生命周期事件 (1)device ...
- Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）
Cordova - 使用Cordova开发iOS应用实战1(配置.开发第一个应用) 现在比较流行使用 html5 开发移动应用,毕竟只要写一套html页面就可以适配各种移动设备,大大节省了跨平台应用的 ...
- Cordova - 使用Cordova开发iOS应用实战5（获取手机里照片，并编辑）
使用Cordova可以很方便的通过js代码读取系统相簿里面的照片,同使用设备摄像头拍照一样,同样需要先添加camera插件. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运 ...
- Swift开发iOS项目实战视频教程（一）---iOS真简单
本课主要介绍iOS项目的创建.第一个iOS项目的开发.UILabel.UIButton的使用. 假设你看完此视频还认为iOS非常难,请你来找我! 本教程摒弃枯燥的语法和知识解说,全是有趣有料的项目实战 ...
- Swift开发iOS项目实战视频教程（二）---图片与动画
本课主要介绍UIImageview.NSTimer的使用.并介绍了一种动画实现方式. 本教程摒弃枯燥的语法和知识解说.全是有趣有料的项目实战! 视频优酷链接:v.youku.com/v_show/id ...
- html5图片上传时IOS和Android均显示摄像头拍照和图片选择
最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为 ...
- [Cordova] Plugin里使用iOS Framework
[Cordova] Plugin里使用iOS Framework 前言 开发Cordova Plugin的时候,在Native Code里使用第三方Library,除了可以加速项目的时程.也避免了重复 ...
- vs2013update4 vs-mda-remote cordova真机测试ios
1.升级vs2013到update4 2.下载安装vs_langpack-enu英语语言包 3.下载安装vs2013mda目前版本0.3.1 如果开发andorid,需要android sdk,ant ...
随机推荐
- Objective—C基础学习总结
1. (1)面向过程:一种以事件为中心的编程思想 (2)面向对象:一种以对象为中心的编程思想 2.get和set是用来访问和修改对象里的属性值 ...
- C文件编译、链接指令
通过mac终端 输入指令: cc -c 文件名.c 可以把C文件编译成.o文件(其实是2进制文件) 然后通过指令 cc 文件名.o 把.o文件链接C文件所需要的C语言的底层库,成为可以直接运行的lin ...
- Nodejs之MEAN栈开发（九）---- 用户评论的增加/删除/修改
由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...
- mysql数据校验之字符集问题
场景:主库DB:utf8字符集备库DB:gbk字符集 需求:校验主备数据是否一致,并且修复 校验过程:设置主库连接为utf8,设置备库连接为gbk,分别进行查询,将返回的的结果集按记录逐字段比较. 显 ...
- 十五天精通WCF——终结篇 那些你需要注意的坑
终于一路走来,到了本系列的最后一篇了,这一篇也没什么好说的,整体知识框架已经在前面的系列文章中讲完了,wcf的配置众多,如果 不加一些指定配置,你可能会遇到一些灾难性的后果,快来一睹为快吧. 一: 第 ...
- SQL中CHARINDEX()/INSTR()函数和SUBSTRING()/SUBSTR()函数
一.SQLServer中的CHARINDEX() 和ORACLE中的INSTR()函数 1.INSTR(C1,C2[,I[,J]]) [功能]在一个字符串中搜索指定的字符,返回发现指定的字符的位置; ...
- 重新认识mapreduce
写这篇文章,是因为最近遇到了mapreduce的二次排序问题.以前的理解不完全正确.首先看一下mapreduce的过程 相信这张图熟悉MR的人都应该见过,再来一张图 wordcount也不细说了,ha ...
- W3School-CSS 边框(border)实例
CSS 边框(border)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边 ...
- [原]ubuntu14.04 网卡逻辑修改没有文件/etc/udev/rules.d/70-persistent-net.rules
-----问题出现------ 在新装的ubuntu14.04系统中没有发现文件/etc/udev/rule.d/70-persistent-net.rules, 无法修改网络的逻辑名称(即把第一张网 ...
- Hello, AnnsShadow!
Hello! 发现这个神奇的园子快一年了,自己的学习历程磕磕碰碰也过了一年了,想想,这么久了,是时候做些记录做个分享者了. 从一开始的只敢看Blog,到现在自己发表一下自己的所感所想,算是一种成长了吧 ...