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. Easyui 基于kindeditor的扩展

    源码 /** * Author : ____′↘夏悸 * Easyui KindEditor的简单扩展. * 有了这个之后,你就可以像使用Easyui组件的方式使用KindEditor了 * 前提是你 ...

  2. MongoDB API和python操作

    安装 下载mongodb的版本,两点注意 根据业界规则,偶数为稳定版,如1.6.X,奇数为开发版,如1.7.X 32bit的mongodb最大只能存放2G的数据,64bit就没有限制 到官网,选择合适 ...

  3. ubuntu中怎样添加或删除一个PPA源

    添加PPA源的命令为:sudo add-apt-repository ppa:user/ppa-name 添加好更新一下: sudo apt-get update删除命令格式则为:sudo add-a ...

  4. spark+hadoop+sqoop+hive平台bug解决方法

    bug集锦 1. hadoop平台datanode无法启动: 原因: 由于多次hdfs namenode -format导致dfs/data/current/version中的cluserID与当前的 ...

  5. Mac下使用Homebrew 安装MySQL

    安装 brew install mysql 卸载 brew uninstall mysql 启动mysql    mysql.server start 管理员账户    mysql -uroot 

  6. java输出

    把一个java对象转化成一个json字符串: JSON.toJSON(user); JSON.toJSONStringWithDateFormat(user, "yyyy-MM-dd HH: ...

  7. Laravel使用ORM操作数据

    数据表 CREATE TABLE IF NOT EXISTS students( `id` INT AUTO_INCREMENT PRIMARY KEY, `name` VARCHAR(255) NO ...

  8. iOS面试题--Model层--沙盒的目录结构是怎么样的？各自一般用于什么场合？

    沙盒的目录结构是怎么样的?各自一般用于什么场合? 一.iOS沙盒机制 iOS的应用只能访问为该应用创建的区域,不可访问其他区域,应用的其他非代码文件都存在此目录下,包括图片,属性文件plist,bun ...

  9. GIT快速学习

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001373962845513ae ...

  10. 深度强化学习资料（视频+PPT+PDF下载）

    https://blog.csdn.net/Mbx8X9u/article/details/80780459 课程主页:http://rll.berkeley.edu/deeprlcourse/ 所有 ...