使用Cordova可以很方便的通过js代码读取系统相簿里面的照片，同使用设备摄像头拍照一样，同样需要先添加camera插件。

一，添加camera插件
首先我们要在“终端”中进入工程所在的目录，然后运行如下命令：
1
cordova plugin add cordova-plugin-camera

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

二，获取照片

我们可以选择是从“照片库（时刻）”中读取图片，或者从“相簿”中读取图片。

1，从“相簿”中获取照片
                        
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
46
47
48
<!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 pictureSource;
            var destinationType;
             
            document.addEventListener("deviceready",onDeviceReady,false);
             
            //Cordova加载完成会触发
            function onDeviceReady() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }
         
            //获取照片
            function getPhoto(source) {
                //quality : 图像的质量，范围是[0,100]
                navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
                                            destinationType: destinationType.FILE_URI,
                                            sourceType: source });
            }
         
            //获取照片成功
            function onPhotoURISuccess(imageURI) {
                //打印出照片路径
                console.log(imageURI);
                var largeImage = document.getElementById('largeImage');
                largeImage.style.display = 'block';
                largeImage.src = imageURI;
            }
 
            //获取照片是吧
            function onFail(message) {
                alert('获取失败: ' + message);
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">
            从“相簿”中获取照片
        </button> <br>
        <img style="display:none;" id="largeImage" src="" />
    </body>
</html>
2，从“照片库（时刻）”中获取照片
                
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
46
47
48
<!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 pictureSource;
            var destinationType;
             
            document.addEventListener("deviceready",onDeviceReady,false);
             
            //Cordova加载完成会触发
            function onDeviceReady() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }
         
            //获取照片
            function getPhoto(source) {
                //quality : 图像的质量，范围是[0,100]
                navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
                                            destinationType: destinationType.FILE_URI,
                                            sourceType: source });
            }
         
            //获取照片成功
            function onPhotoURISuccess(imageURI) {
                //打印出照片路径
                console.log(imageURI);
                var largeImage = document.getElementById('largeImage');
                largeImage.style.display = 'block';
                largeImage.src = imageURI;
            }
 
            //获取照片是吧
            function onFail(message) {
                alert('获取失败: ' + message);
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">
            从“时刻”中获取照片
        </button> <br>
        <img style="display:none;" id="largeImage" src="" />
    </body>
</html>

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1148.html

Cordova - 使用Cordova开发iOS应用实战5（获取手机里照片，并编辑）的更多相关文章

  1. Cordova - 使用Cordova开发iOS应用实战3（添加Cordova控制台插件）

    Cordova - 使用Cordova开发iOS应用实战3(添加Cordova控制台插件) 前文介绍了通过 Safari 的 Web检查器,可以看到控制台输出的信息.但有时这样调试代码不太方便,如果在 ...

  2. Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）

    Cordova - 使用Cordova开发iOS应用实战2(生命周期.使用Safari调试) 前文我们创建了一个简单的Cordova项目,结构如下: 1,Cordova生命周期事件 (1)device ...

  3. Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）

    Cordova - 使用Cordova开发iOS应用实战1(配置.开发第一个应用) 现在比较流行使用 html5 开发移动应用,毕竟只要写一套html页面就可以适配各种移动设备,大大节省了跨平台应用的 ...

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

    使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...

  5. Swift开发iOS项目实战视频教程（一）---iOS真简单

    本课主要介绍iOS项目的创建.第一个iOS项目的开发.UILabel.UIButton的使用. 假设你看完此视频还认为iOS非常难,请你来找我! 本教程摒弃枯燥的语法和知识解说,全是有趣有料的项目实战 ...

  6. Swift开发iOS项目实战视频教程（二）---图片与动画

    本课主要介绍UIImageview.NSTimer的使用.并介绍了一种动画实现方式. 本教程摒弃枯燥的语法和知识解说.全是有趣有料的项目实战! 视频优酷链接:v.youku.com/v_show/id ...

  7. vs2013update4 vs-mda-remote cordova真机测试ios

    1.升级vs2013到update4 2.下载安装vs_langpack-enu英语语言包 3.下载安装vs2013mda目前版本0.3.1 如果开发andorid,需要android sdk,ant ...

  8. VS2015 Cordova Ionic移动开发（五）

    一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合 ...

  9. VS2015 Cordova Ionic移动开发（四）

    一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合,简单介绍下Ionic的布局.Ionic采用自定义标签和标准Html标签相结合.相对于全部使用div方 ...

随机推荐

  1. java验证码组件kaptcha使用方法

    使用方法: 项目中导入kaptcha-2.3.jar包在web.xml里面新增: <!-- 登陆验证码Kaptcha -->    <servlet>        <s ...

  2. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

  3. 学习 HTML5-目录

    1.学习 HTML5-页面结构 2.HTML5标记 3.HTML5机构化语义元素 4.HTML5表单 5.HTML5媒体元素:Audio和Video 6.HTML5绘图API 7.HTML5 Canv ...

  4. 定做属于自己的Lodop安装程序

    WEB控件Lodop自发布以来,受到广大开发人员的喜爱,从如下博文分析看看: http://blog.sina.com.cn/s/blog_721e77e501011nyb.html 无论是好评率还是 ...

  5. WPF学习之路（三） 属性与依赖

    类型是DependencyProperty的属性是依赖属性 依赖属性不同于普通的.Net属性,类似于一个计算过程,根据依赖的值得到最终值. 为什么引入依赖属性: MSDN原文 One of the p ...

  6. 敏捷开发--scrum

    1.  请简述一下什么是敏捷开发(Agile Development),以及什么是持续集成.  敏捷开发是一种以人为核心.迭代.循序渐进的开发方法.在敏捷开发中,软件项目的构建被切分成多个子项目,各个 ...

  7. JAVA NIO中的Channels和Buffers

    前言 Channels和Buffers是JAVA NIO里面比较重要的两个概念,NIO正是基于Channels和Buffers进行数据操作,且数据总是从Channels读取到Buffers,或者从Bu ...

  8. 字符输出流Writer简要概括

    偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...

  9. MongoDB 介绍

    MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoDB工作在收集和文件的概念. 数据库 数据库是一个物理容器集合.每个数据库都有自己的一套文件系统上的文 ...

  10. MySQL数据库出现The server quit without updating PID file.

    一.服务器环境 操作系统:CentOS-6.4 服务器环境:集成环境LNMP1.0 二.步骤重现 1.安装LNMP1.0,具体操作方法见这里,安装成功: 2.因个人需求,现将MySQL数据库存放在/d ...