一、 Camera Api 简单介绍

　　Camera 选择使用摄像头拍照，或从设备相册中获取一张照片。图片以 base64 编码的 字符串或图片 URI 形式返回。

　　方法：

　　　　1. camera.getPicture 拍照获取相册图片 navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

　　　　　　cameraSuccess：提供图像数据的 onSuccess 回调函数。

　　　　　　cameraError：提供错误信息的 onError 回调函数。

　　　　　　cameraOptions：定制摄像头设置的可选参数

　　　　2. camera.cleanup 清除拍照后设备的缓存图片

　　　　　　navigator.camera.cleanup( cameraSuccess, cameraError );

　　　　3.cameraOptions 参数： 定制摄像头设置的可选参数。

　　　　　　quality : 存储图像的质量，范围是[0,100]。

　　　　　　destinationType :选择返回数据的格式。

　　　　　　　　　　DATA_URL :0, // Return image as base64-encoded string

　　　　　　　　　　FILE_URI :1, // Return image file URI

　　　　　　　　　　NATIVE_URI :2 // Return image native URI (e.g. assets-library:// on iOS or content:// on Android)

　　　　　　sourceType :设定图片来源。data:image/jpeg;base64,

　　　　　　　　　　PHOTOLIBRARY :0,//拍完照后图片的路劲从图库中获取

　　　　　　　　　　CAMERA :1,//拍完照后图片的路劲从设备照相机中获取

　　　　　　　　　　SAVEDPHOTOALBUM :2//拍完照后图片的路劲从相册中获取

　　　　　　allowEdit :在选择图片进行操作之前允许对其进行简单编辑。(好像只有 ios 支持，在 Android 中，忽略 allowEdit 参数。)

　　　　　　encodingType :选择返回图像文件的编码方 encodingType: Camera.EncodingType.JPEG

　　　　　　targetWidth :以像素为单位的图像缩放宽度指定图片展示的时候的宽度

　　　　　　targetHeight :以像素为单位的图像缩放高度指定图片展示的时候的高度

　　　　　　saveToPhotoAlbum:拍完照片后是否将图像保存在设备上的相册

　　　　　　mediaType 设置选择媒体的类型

　　　　　　　　　　PICTURE:0, // allow selection of still pictures only.DEFAULT. Will return format specified via DestinationType

　　　　　　　　　　VIDEO:1, // allow selection of video only, WILL ALWAYS RETURN FILE_URI

　　　　　　　　　　ALLMEDIA :2 // allow selection from all media types

　　　　　　cameraDirection 选择前置摄像头还是后置摄像头

　　　　　　　　　　BACK :0, // Use the back-facing camera

　　　　　　　　　　FRONT :1 // Use the front-facing camera

　　　　Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM 都会显示同一个相集。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){

            document.addEventListener("deviceready", myDeviceReadyListener, false);

    });

     function myDeviceReadyListener(){

         $('#btn_getPic').click(function(){

             navigator.camera.getPicture(onSuccess, onFail, {

                quality: 70,

                destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url  这里进行了编码，成功拍照获取图片路径对应的方式如下

                //sourceType:Camera.PictureSourceType.Camera, //摄像机获取，调用拍照

                sourceType:Camera.PictureSourceType.PHOTOLIBRARY, //从图库中选取图片，不用调用拍照

                targetWidth:200,

                targetHeight:200

            });

         })

    }

    //成功  回调函数里包含图片的地址

    function onSuccess(imageURI){

        alert(imageURI);

        $('#img_pic').css('display','block');

        $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);

        //image.src = "data:image/jpeg;base64," + imageData;

    }

    //失败  回调函数李包含失败返回的信息

    function onFail(message) {

        alert('Failed because: ' + message);

    }

</script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>Camera</h1>

        </div>

        <div data-role="content">

            <img style="dispaly:none" id="img_pic"/>

            <a id="btn_getPic" href="#" data-role="button">拍照</a>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){

            document.addEventListener("deviceready", myDeviceReadyListener, false);

    });

     function myDeviceReadyListener(){

         $('#btn_getPic').click(function(){

             navigator.camera.getPicture(onSuccess, onFail, {

                 quality: 70,

                destinationType: Camera.DestinationType.FILE_URI, //以文件地址返回url

                sourceType:Camera.PictureSourceType.Camera,

                targetWidth:300,

                targetHeight:300

            });

         })

    }

    //成功

    function onSuccess(imageURI) {

        alert(imageURI);

        $('#img_pic').css('display','block');

        $('#img_pic').attr("src",imageURI);//这种获取图片路径的方式对应的是destinationType: Camera.DestinationType.FILE_URI

    }

    //失败

    function onFail(message) {

        alert('Failed because: ' + message);

    }

</script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>Camera</h1>

        </div>

        <div data-role="content">

            <img style="dispaly:none" id="img_pic"/>

            <a id="btn_getPic" href="#" data-role="button">拍照</a>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){

            document.addEventListener("deviceready", myDeviceReadyListener, false);

    });

     function myDeviceReadyListener(){

         $('#btn_getPic').click(function(){

             navigator.camera.getPicture(onSuccess, onFail, {

                 quality: 70,

                destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url

                sourceType:Camera.PictureSourceType.Camera,

                targetWidth:100,

                targetHeight:100

            });

         })

    }

    //成功

    function onSuccess(imageURI){

        alert(imageURI);

        $('#img_pic').css('display','block');

        $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);

        //image.src = "data:image/jpeg;base64," + imageData;

    }

    //失败

    function onFail(message) {

        alert('Failed because: ' + message);

    }

</script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>Camera</h1>

        </div>

        <div data-role="content">

            <img style="dispaly:none" id="img_pic"/>

            <a id="btn_getPic" href="#" data-role="button">拍照</a>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){

            document.addEventListener("deviceready", myDeviceReadyListener, false);

    });

     function myDeviceReadyListener(){

         //从相机拍照获取 base64 编码方式返回

         $('#btn_getPic').click(function(){

             navigator.camera.getPicture(onSuccess1, onFail, {

                 quality: 70,

                destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url

                sourceType:Camera.PictureSourceType.Camera,

                targetWidth:100,

                targetHeight:100

            });

         })

         //从图库获取 url

         $('#btn_getLibiaryPic').click(function(){

             navigator.camera.getPicture(onSuccess2, onFail, {

                 quality: 70,

                destinationType: Camera.DestinationType.FILE_URL, //以文件地址返回url，如果选择的媒体类型是视频，只能是这个方式：FILE_URL

                sourceType:Camera.PictureSourceType.PHOTOLIBRARY,

                mediaType:Camera.MediaType.VIDEO,

                targetWidth:100,

                targetHeight:100

            });

         })

    }

    //成功 相机

    function onSuccess1(imageURI){

        alert(imageURI);

        $('#img_pic').css('display','block');

        $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);

        //image.src = "data:image/jpeg;base64," + imageData;

    }

    //成功 图库

    function onSuccess2(imageURI){

        alert(imageURI);

        //$('#img_pic').css('display','block');

       // $('#img_pic').attr("src",imageURI);

         $("#videocontainer").append("<video height=240 width=300 controls='controls' src='"+imageURI+"' >your browder doesn't support video tag</video>");

        //image.src = "data:image/jpeg;base64," + imageData;

    }

    //失败

    function onFail(message) {

        alert('Failed because: ' + message);

    }

</script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>Camera</h1>

        </div>

        <div data-role="content">

            <img style="dispaly:none" id="img_pic"/>

            <a id="btn_getPic" href="#" data-role="button">拍照</a>

            <a id="btn_getLibiaryPic" href="#" data-role="button">本地预览</a>

            <div id="videocontainer">

            </div>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

</div>

</body>

</html>

phonegap的照相机 API的更多相关文章

  1. phonegap的照相机API

    1. Camera Api简单介绍 2. 拍照 3. 预览照片 一. Camera Api简单介绍 Camera选择使用摄像头拍照,或从设备相册中获取一张照片.图片以base64编码的 字符串或图片U ...

  2. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）

    之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...

  3. PhoneGap 的文件 api

    一. 文件系统的请求 请求文件系统通过 window.requestFileSystem 来完函数声明如下: window.requestFileSystem(type, size, successC ...

  4. phonegap 的指南针 api Compass

    一. Compass 介绍方法参数   1.Compass 也就是,常说的指南针,又叫罗盘 2.方法 compass.getCurrentHeading compass.watchHeading co ...

  5. 新手的第一个phonegap Android应用

    对PhoneGap开发感兴趣的请加入群 PhoneGap App开发 348192525   手机成为现在软件应用必不可少的一种设备,然而手机平台的不统一造成我们需要为不同手机重写代码,这对一般应用来 ...

  6. 构建通过 Database.com 提供技术支持的 PhoneGap 应用程序

    要求 其他必要产品 Database.com account 用户级别 全部 必需产品 PhoneGap Build 范例文件 Database.Com-PhoneGap-Sample 在这篇文章中, ...

  7. 在Android平台下搭建PhoneGap开发环境--用HTML5开发游戏

    一.在Android平台下搭建PhoneGap开发环境具体怎么搭建我这里就不详细说了,如有需要我后面再讲 . PhoneGap 官方地址有详细说明:http://www.phonegap.com. 在 ...

  8. [转]跨平台开发：PhoneGap移动开发框架初探

    目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iph ...

  9. Android用PhoneGap封装webapp在android代码中实现连按退出和loadingpage

    用PhoneGap封装后的程序有一些瑕疵,比如启动时黑屏,菜单按钮和返回按钮不好控制等. PhoneGap也在github提交的它的源码(版本:2.8): https://github.com/apa ...

随机推荐

  1. <数据挖掘导论>读书笔记2

    1.频率和众数 frequency(vi)=具有属性值vi的对象数/m 分类属性的众数mode是具有最高频率的值. 2.百分位数 3.位置度量:均值和中位数 4.散布度量:极差和方差 绝对平均偏差 A ...

  2. [跨域]跨域解决方法之Ngnix反向代理

    跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介绍Ngnix之前,我么先来介绍下代理是什么~ 代理相当于中间人,中介的概念 代理分为正向代理和反向代 ...

  3. HttpContext在多线程异步调用中的使用方案

    1.在线程调用中,有时候会碰到操作文件之类的功能.对于开发人员来说,他们并不知道网站会被部署在服务器的那个角落里面,因此根本无法确定真实的物理路径(当然可以使用配置文件来配置物理路径),他们唯一知道的 ...

  4. sqlserver - FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  5. Spring学习笔记：声明式事务管理增删改查业务

    一.关于是事务 以方法为单位,进行事务控制:抛出异常,事务回滚. 最小的执行单位为方法.决定执行成败是通过是否抛出异常来判断的,抛出异常即执行失败 二.声明式事务: 声明式事务(declarative ...

  6. Java基础（十三）反射

    一.反射 1.反射概念 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的 ...

  7. cocos creator Touch事件应用(触控选择多个子节点)

    最近参与了cocos creator的研究,开发小游戏,结果被一个事件坑得不行不行的.现在终于解决了,分享给大家. 原理 1.触控事件是针对节点的 2.触控事件的冒泡,是一级一级往上冒泡,中间可以阻止 ...

  8. Heka 的编译

    Heka是Mozilla开源的,基于Go语言实现的,插件式log收集和分析系统. 已经编译好的 release 版本可以在下面地址下载: https://github.com/mozilla-serv ...

  9. Linux基础之命令练习Day2-useradd（mod，del），groupadd（mod，del），chmod，chown，

    作业一: 1) 新建用户natasha,uid为1000,gid为555,备注信息为“master” 2) 修改natasha用户的家目录为/Natasha 3) 查看用户信息配置文件的最后一行 4) ...

  10. KMP算法的一个简单实现

    今天学习KMP算法,参考网上内容,实现算法,摘录网页内容并记录自己的实现如下: 原文出处: http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93M ...