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. Linux 实用工具vi

    vi有输入和命令两种工作模式.命令模式是用来运行一些编排文件.存档以及离开vi等操作命令. 当执行vi后,首先进入命令模式,此时输入的人数字符都被视为命令. 在命令模式下,可以使用如下两个键进入文本输 ...

  2. 接入qq登录功能出现的问题

    在调用qq授权的接口时,出现以上错误. 原因是: 打包的应用签名和第一次上传包的签名不一致造成的 解决方法: 第一种方法:用上次打包apk的keystore重新打包apk,使签名一致. 第二种方法:联 ...

  3. LeetCode 递归（Recursion） 培训专题 讲解文章翻译 （附链接）

     递归 - 时间复杂度 在本文中, 我们主要介绍如何分析递归算法程序中的时间复杂度.. 在一个递归程序中, 它的时间复杂度 O(T) 一般来说就是他总共递归调用的次数 (定义为 R) 以及每次调用时所 ...

  4. Tomcat (7.0)数据源配置

    在Tomcat这个Java Web容器下通过配置DataSource(数据源)对象能够解决上面所述的问题. JDBC中的javx.sql.DataSource接口负责建立于数据库的连接.程序中直接从数 ...

  5. ERROR 1130: Host &#39;&#39; is not allowed to connect to thisMySQL server

    今天1网友求助,说自己PHPmyadmin能够正常连接数据库,使用sqlyog报错: ERROR 1130: Host '172.27.214.1' is not allowed to connect ...

  6. 边双联通问题求解（构造边双连通图）POJ3352(Road Construction)

    题目链接:传送门 题目大意:给你一副无向图,问至少加多少条边使图成为边双联通图 题目思路:tarjan算法加缩点,缩点后求出度数为1的叶子节点个数,需要加边数为(leaf+1)/2 #include ...

  7. libnids介

    转自:http://blog.chinaunix.net/uid-22832715-id-2111578.html Libnids开发包介绍     Libnids是一个用于网络入侵检测开发的专业编程 ...

  8. Linux 常用命令缩写及对应的

    0.项目名: Linux -- LINUs' uniX (开个玩笑不是这样的,别当真) GNU -- Gnu is Not Unix1.目录名: /boot:顾名思义 /root :同上 /run:同 ...

  9. Machine Learning - week 2 - Multivariate Linear Regression

    Multiple Features 上一章中,hθ(x) = θ0 + θ1x,表示只有一个 feature.现在,有多个 features,所以 hθ(x) = θ0 + θ1x1 + θ2x2 + ...

  10. java集合的部分接口

    接口 Collection<E> public interface Collection<E>extends Iterable<E> Collection 层次结构 ...