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 ...
随机推荐
- [转]从JVM角度看线程安全与垃圾收集
线程安全 Java内存模型中,程序(进程)拥有一块内存空间,可以被所有的线程共享,即MainMemory(主内存):而每个线程又有一块独立的内存空间,即WorkingMemory(工作内存).普通情况 ...
- 定做属于自己的Lodop安装程序
WEB控件Lodop自发布以来,受到广大开发人员的喜爱,从如下博文分析看看: http://blog.sina.com.cn/s/blog_721e77e501011nyb.html 无论是好评率还是 ...
- nav布局 在线演示 DIVCSS5
<!doctype html> nav布局 在线演示 DIVCSS5 传统 div ul li布局导航条效果 网站首页 HTML教程 HTML入门 HTML5教程 CSS教程 CSS入门 ...
- Asp.net MVC验证哪些事（2）-- 验证规则总结以及使用
上篇文章Asp.net MVC验证那些事(1)-- 介绍和验证规则使用中,介绍了Asp.net MVC中的验证功能以及如何使用.这里将对MVC中内置的验证规则进行总结. 一,查找所有验证规则 上篇文章 ...
- 使用Hive或Impala执行SQL语句，对存储在HBase中的数据操作
CSSDesk body { background-color: #2574b0; } /*! zybuluo */ article,aside,details,figcaption,figure,f ...
- 未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一个依赖项 解决方法
在webconfig中加入这段话就可以了 <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:as ...
- x01.os.16: 添加功能
准备工作 1.确保是 win xp,如是 win 8,运行 nasm 需按提示同意安装组件. 2.确保 src 和 z_tools 在同一目录下,nasm 已包含在 z_tools 文件夹中. ...
- Python 变量类型
Python 变量类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的数据 ...
- 虚拟机centos6.5 --安装jdk
1.首先卸载默认安装的openjdk,如下 rpm -qa | grep java #查看当前是否已经安装了跟java有关的包 yum -y remove java #卸载 rpm -qa |grep ...
- 移动端rem单位用法[转]
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...