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. Java基础 - 强引用、弱引用、软引用、虚引用

    1.强引用(StrongReference) 强引用是使用最普遍的引用. 假设一个对象具有强引用.那垃圾回收器绝不会回收它.例如以下: [java] view plaincopyprint" ...

  2. MathType可以编辑省略号吗

    说到省略号大家可能会想到写文章的时候会用到,其实在数学中也会常常的使用到.当数学过程是重复有规律性的过程时,就会用到它.MathType是一款数学公式编辑器,那么,在数学公式中,MathType编辑时 ...

  3. Struts2上传文件（1）

    使用Struts框架后, Struts2框架不会处理multipart/form-data的请求,它需要调用其他的上传文件框架来解析二进制数据.但是Struts在原有的上传解析器基础上做了很多的封装, ...

  4. JEECMS 2.4.2 之添加新的可扩展的ftl模版文件、自定义方法

    Demo: <@cms.CfgList isPage='1' league='0' recommend='0' lala='0' hot='1' memberId='0' pageNo=page ...

  5. easyui datagrid加载数据的两种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  6. HttpWatch使用教程

    一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...

  7. N - Broken Keyboard (a.k.a. Beiju Text)(DFS,链表)

    N - Broken Keyboard (a.k.a. Beiju Text) Time Limit:1000MS     Memory Limit:0KB     64bit IO Format:% ...

  8. jQuery实现局部刷新页面数据绑定

    今天遇到了一个问题:怎么样才能做到只刷新页面中的Repeater控件中的数据,在不用UploadPannel的情况下? 试了好多方法,无意间在看jquery文件时发现,使用load()方法即可解决此问 ...

  9. <2013 08 27> 雅思阅读相关

    1.雅思阅读的总体难度不大,但是时间较紧,三段较长的阅读材料和40个题目,总耗时60min.基本上前两个材料可以花15~20min,最后一个材料至少花20min完成. 2.阅读的技巧在于三点:其一,先 ...

  10. velocity 遍历EventHandler Iterator

    EventHandlerUtil 类的 iterateOverEventHandlers方法 for (Iterator i = handlerIterator; i.hasNext();){ Eve ...