使用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. (转)postman中 form-data、x-www-form-urlencoded、raw、binary的区别

    1.form-data:  就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件 ...

  2. TFS2012 自动生成与部署

    思路: 每日构建,自动生成,然后从TFS提交日志中提取版本修订说明,调用打包脚本混淆并生成安装包(系统自带的太锉),最后将相关文件复制到指定网站供浏览下载.自动向测试网站发布,自动生成数据库并初始化. ...

  3. js 模仿块级作用域（私有作用域）、私有变量

    function outputNumbers(count){ var privateVariable = 10;//私有/局部变量,函数外部不能被访问 publicVariable = 20;//全局 ...

  4. Win8&Win2012R2如何支持DOTA2输入法

    微软自带的拼音和五笔就不用看了,没研究过,下面的方法应该不支持. 其实方法很简单运行下ctfmon.exe就可以了,这个原来旧输入模式的基础,测试可以支持QQ五笔. PS:使用拼音输入法的用户可以直接 ...

  5. git技巧记录--子模块删除方法

    把子模块推进去了,删掉吧(将子模块删除,然后提交推送),删除子模块步骤: 1.在Platform.Web库下,右键->Git Bash,进入git命令行窗口,输入:git rm –-cached ...

  6. CocoaPods安装以及相关问题解决

    Mac OS X上安装 Ruby环境 安装RVM $ curl -L https://get.rvm.io | bash -s stable 关闭终端,新开另外一个终端(新打开的终端会自动载入RVM环 ...

  7. C#中去掉表中重复的数据

    /// <summary> /// 去掉表中重复的数据  int /// </summary> /// <param name="SourceTable&quo ...

  8. plsql 查询结果窗口 不正常

    今天发现了一个很有趣的现象,一个查询语句查出来的结果窗口只显示一部分. 是因为查询语句中有全角的字符或者空格: 如果是sqlServer的话直接就报错了,而plsql不报错,显示如下

  9. 设计模式C#实现（十）——桥接模式

    意图 0 适用性 1 结构 2 实现 3 效果 4 意图 将抽象部分与它的实现部分分离,使它们都可以独立的变化. 适用性 1.不希望抽象和实现间有固定的绑定关系2.类的抽象以及它的实现都可以通过生成子 ...

  10. android java数组应用与说明

    如果定义类或结构数据则需每个都进行创建才可以使用,不然都为null 如: PointF pts[] = new PointF[5] ;//pts[0].x =CSSliderSize / 2;//这样 ...