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 ...
随机推荐
- AEAI DP按钮权限配置说明
1 背景概述 AEAI DP3.5版本以后支持对按钮权限进行灵活的管理配置,本文对配置过程进行详细说明,为相关使用人员提供指导和参考. 2 预期读者 数通畅联技术人员 AEAI DP开发平台使用人员 ...
- 让UNION与ORDER BY并存于SQL语句当中
在SQL语句中,UNION关键字多用来将并列的多组查询结果(表)合并成一个结果(表),简单实例如下: SELECT [Id],[Name],[Comment] FROM [Product1] UNIO ...
- mysql技巧之select count的比较
在工作过程中,时不时会有开发咨询几种select count()的区别,我总会告诉他们使用select count(*) 就好.下文我会展示几种sql的执行计划来说明为啥是这样. 1.测试 ...
- Java NIO 基础
Java在JDK1.4中引入了 java.nio 类库,为Java进军后端Server和中间件开发打开了方便之门. 一般而言,这里的 nio 代表的是 New I/O,但是从实质上来说,我们可以将其理 ...
- W3School-CSS 文本实例
CSS 文本实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...
- gulp系列：自动构建及刷新浏览器
2016年3月3日 14:50:15 晴 .清空目录 常用插件 gulp-clean .del (nodejs模块)del = require('del')#2.文件复制 原生模块gulp,插 ...
- SQL中JOIN 的用法
关于sql语句中的连接(join)关键字,是较为常用而又不太容易理解的关键字,下面这个例子给出了一个简单的解释 --建表table1,table2:create table table1(id int ...
- Linux运行等级，根目录，文件类型etc
Linux的Runlevel Linux默认有6个Terminal(Ctrl+Alt+F1~F6)和1个X window(Ctrl+Alt+F7,图形化界面)让用户登录 Linux的runlevel一 ...
- WinMain与wWinMain，win32的字符集问题
刚接触win32开发的会发现,用vs新建一个win32项目默认代码里面的入口函数并不是WinMain而是_tWinMain或者wWinMain,这些都有什么区别呢? WinMain对应的是多字节字符集 ...
- KVM 介绍（8）：使用 libvirt 迁移 QEMU/KVM 虚机和 Nova 虚机 [Nova Libvirt QEMU/KVM Live Migration]
学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I/O PCI/PCIe设备直接分 ...