camera对象提供对设备默认摄像头应用程序的访问。

程序运行效果

相关代码

<!DOCTYPE html>

<html>

  <head>

    <title>

      PhoneGap Device Ready Example

    </title>

    <link

        href="content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css"

        rel="stylesheet"

        type="text/css"/>

    <link href="content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" type="text/css"/>

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

    </script>

    <script src="content/js/jquery.mobile-1.4.0-beta.1.js" type="text/javascript">

    </script>

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

    </script>

    <script type="text/javascript">

      //提示信息

      function showAlert(text) {

        $.mobile.loading( "show", {

          text: text,

          textVisible: true,

           theme: "b",

          textonly: true

          });

        }

        function Alert(text) {

          console.log('Alert');

          console.log('text');

          showAlert(text);

        }

        //退出app

        function exitApp() {

          console.log('exitApp');

          navigator.app.exitApp();

        }

      </script>

      <script type="text/javascript">

        var pictureSource;        //图片来源

        var destinationType;        //设置返回值的格式

        $(function(){

          //当PhoneGap被完全加载后会触发该事件。

          document.addEventListener('deviceready',onDeviceReady,false);

          })

          // PhoneGap准备就绪，可以使用！

          function onDeviceReady() {

            pictureSource=navigator.camera.PictureSourceType;

            destinationType=navigator.camera.DestinationType;

            document.addEventListener('backbutton',Backbutton,false);

          }

          function Backbutton(){

            Alert('再次点击返回键切换到桌面!');

            document.removeEventListener("backbutton", Backbutton, false);

            document.addEventListener("backbutton", exitApp, false);

            var intervalID = window.setTimeout(function() {

              $.mobile.loading( "hide" );

              window.clearTimeout(intervalID);

              document.removeEventListener("backbutton", exitApp, false);

              document.addEventListener("backbutton", Backbutton, false);

              }, 3000);

            }

            // 当成功获得一张照片的Base64编码数据后被调用

            function onPhotoDataSuccess(imageData) {

              alert('imageURI: ' + imageURI);

              // 取消注释以查看Base64编码的图像数据

              // console.log(imageData);

              // 获取图像句柄

              var smallImage = document.getElementById('smallImage');

              // 取消隐藏的图像元素

              smallImage.style.display = 'block';

              // 显示拍摄的照片

              // 使用内嵌CSS规则来缩放图片

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

            }

            // 当成功得到一张照片的URI后被调用

            function onPhotoURISuccess(imageURI) {

              // 取消注释以查看图片文件的URI

              console.log(imageURI);

              alert('imageURI: ' + imageURI);

              // 获取图片句柄

              var largeImage = document.getElementById('largeImage');

              // 取消隐藏的图像元素

              largeImage.style.display = 'block';

              // 显示拍摄的照片

              // 使用内嵌CSS规则来缩放图片

              largeImage.src = imageURI;

            }

            // “Capture Photo”按钮点击事件触发函数

            function capturePhoto() {

              // 使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像

              navigator.camera.getPicture(onPhotoURISuccess,onFail, { quality: 50 });

            }

            //“From Photo Library”/“From Photo Album”按钮点击事件触发函数

            function getPhoto(source) {

              // 从设定的来源处获取图像文件URI

              //如果Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM，系统弹出照片选择对话框，用户可以从相集中选择照片。

              navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,

              destinationType: destinationType.FILE_URI,sourceType: source });

            }

            // 当有错误发生时触发此函数

            function onFail(mesage) {

              alert('Failed because: ' + message);

            }

          </script>

        </head>

        <body>

          <button onclick="capturePhoto();">

            拍照

          </button>

          <br>

          <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">

            选择图片

          </button>

          <br>

          <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">

            选择照片

          </button>

          <br>

          <img style="display:none;width:250px;height:250px;" id="smallImage" src="" />

          <img style="display:none;width:250px;height:250px;" id="largeImage" src="" />

        </body>

      </html>

源代码示例包[调试通过]

点击下载

声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。

跨平台移动开发_PhoneGap API Camera 使用摄像头采集照片.的更多相关文章

  1. 跨平台移动开发_PhoneGap API 事件类型

    PhoneGap API Events backbuttondevicereadymenubuttonpauseresumeonlineofflinebatterycriticalbatterylow ...

  2. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  3. 跨平台移动开发_PhoneGap 警告,通知,鸣叫,振动4 种通知类型

    创建鸣叫  使用 confirmation.beep 创建鸣叫 function playBeep() {     navigator.notification.beep(1); } 创建振动  使用 ...

  4. 跨平台移动开发_PhoneGap 再次点击返回键切换到桌面效果

    PhoneGap 再次点击返回键切换到桌面效果 相关代码 <!DOCTYPE html> <html> <head> <title> PhoneGap ...

  5. 跨平台移动开发_PhoneGap 使用Accelerometer 加速器

    使用Accelerometer 加速器效果图 示例代码 <!DOCTYPE html> <html> <head> <title> Cude Phone ...

  6. 【视频开发】【Live555】摄像头采集，264编码，live555直播

    加入 摄像头采集和264编码,再使用live555直播 1.摄像头采集和264编码 将x264改成编码一帧的接口,码流不写入文件而是直接写入内存中(int  Encode_frame 函数中). /* ...

  7. 【视频开发】【Live555】摄像头采集，264编码，live555直播（0）

    参看 有关live555 1.首先需要修改live555,定义从 内存中直接获取source而不是从文件读取source的类. 自己实现的类命名为 H264FramedLiveSource   /* ...

  8. 跨平台移动开发工具:PhoneGap与Titanium全方位比拼

    PhoneGap和Appcelerator Titanium,对于封装和配置移动应用程序而言,二者都是非常受欢迎的开源JavaScript框架.本文为Appcelerator开发者Kevin Whin ...

  9. 全球首个全流程跨平台界面开发套件，PowerUI分析

    一.       首个全流程跨平台界面开发套件,PowerUI正式发布 UIPower在DirectUI的基础上,自主研发全球首个全流程跨平台界面开发套件PowerUI(PUI)正式发布,PowerU ...

随机推荐

  1. -webkit-transition: all .2s ease-in-out;

    W3C标准中对CSS3的transition这是样描述的:CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并 ...

  2. 小知识，大智慧（restframework 拾忆）

    一.直接对query_set序列化,在页面展示的效果是Unicode 编码格式 ,可在json 序列化时候加入一个参数 course_query = DegreeCourse.objects.all( ...

  3. 制作dos启动u盘

    需要准备的工具: 空U盘的U盘HP优盘启动盘格式化工具 链接:https://pan.baidu.com/s/1i59wgUp 密码:l5ke 1.1插入U盘,打开   HP优盘启动盘格式化工具 1. ...

  4. 编写自己的cp命令

    有时候要对整个目录做备份,修改cp1.c使得当两个参数都是目录时,把第一个目录中的所有文件复制到第二个目录中,文件名不变.那么该如何实现? 我们先来看看cp1.c的实现方式,它从一个文件中读取数据然后 ...

  5. Django项目部署(django+guncorn+virtualenv+nginx)

    一.说明 为了django项目部署到生产环境上,能够稳定的运行,且能够同时指出http和https的访问,对django的部署进行了一些研究,决定采用django + gunicorn + virtu ...

  6. 【BZOJ2721】[Violet 5]樱花 线性筛素数

    [BZOJ2721][Violet 5]樱花 Description Input Output Sample Input 2 Sample Output 3 HINT 题解:,所以就是求(n!)2的约 ...

  7. delphi 中配置文件的使用（*.ini）和TIniFile 用法

    一.配置文件 .ini 文件是基于文本类型的格式文件,用于存储程序初始化和配置数据. .ini文件是有段(Sections)和键(key)组成的,每个文件可以有 n个段(每个段有方括号括起来),每个段 ...

  8. 巨蟒python全栈开发django4:url反向解析图解&&模板渲染2

    注意:前端有aaa变量,后端没有aaa变量,存在p标签,但是显示不出来 有p标签,我们可以指定默认值,在没有其他内容的时候 过滤器有60多种,有点多,用到的时候再记和查 结果: 显示是acd 看长度 ...

  9. 【22,23节】Django的GET和POST属性笔记

    COOKIES:一个标准的python字典对象,包含所有cookies,键和值都为字符串session:一个即能读又能写的类似字典对象,表示当前的会话,只有当django启用会话的支持时才可用 一键多 ...

  10. yum命令的实例

    1) 自定义yum仓库:createrepo 2) 自定义repo文件 3) 使用yum命令安装httpd软件包(在这里需要强调一点,本身执行yum.repos.d时,文件里面是有自带的yum源的,需 ...