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. bitset在acm中的应用

    ps:最近碰到一些用bitset优化常数的题目,以前也有接触但是都没有记下来,所以来写一篇博文 记录以后碰到的类似的题目. 应用一: 优化boolean multiplication 在做dp的时候, ...

  2. diango-tinymce富文本编译器

    应用到项目中 在settings.py中为INSTALLED_APPS添加编辑器应用 INSTALLED_APPS = ( ... 'tinymce', ) 在settings.py中添加编辑配置项 ...

  3. 《PhotoShop CS6 》第一节 矢量与分辨率

    分辨率:不一定是方形,可以调整其比例. 色彩模型:色相Hue(圆周,冷暖相接),饱和度Saturation(半径),明度Brightness(轴,从黑到白).

  4. （转载）java提高篇(五)-----抽象类与接口

    接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 本文是转载的(尊重原著),原文地址:http://www.cnblogs.com/chenssy/p/3376708.html 抽象类 ...

  5. 【BZOJ1820】[JSOI2010]Express Service 快递服务 暴力DP

    [BZOJ1820][JSOI2010]Express Service 快递服务 Description 「飞奔」快递公司成立之后,已经分别与市内许多中小企业公司签订邮件收送服务契约.由于有些公司是在 ...

  6. 【BZOJ1923】[Sdoi2010]外星千足虫 高斯消元

    [BZOJ1923][Sdoi2010]外星千足虫 Description Input 第一行是两个正整数 N, M. 接下来 M行,按顺序给出 Charles 这M次使用“点足机”的统计结果.每行 ...

  7. 【BZOJ2150】部落战争 最小流

    [BZOJ2150]部落战争 Description lanzerb的部落在A国的上部,他们不满天寒地冻的环境,于是准备向A国的下部征战来获得更大的领土. A国是一个M*N的矩阵,其中某些地方是城镇, ...

  8. 关于jquery的取消阻止默认事件

    最近帮朋友做个东西,整个屏幕有一个遮罩层,但是这个遮罩层能滑动,于是百度了一下,返现,用 $('body').bind("touchmove",function(e){ e.pre ...

  9. coursera 《现代操作系统》 -- 第十一周 IO系统

    本周要求 错题 下列I/O控制方式中,哪一个不需要硬件支持? 中断方式 轮询方式 DMA方式 I/O处理机方式 中断方式:中断控制器 轮询方式:CPU不断查询设备以了解其是否就绪 DMA:使用到了   ...

  10. django database relations

    注意Django的生成的默认api from django.db import models class Place(models.Model): ''' pass class Restaurant( ...