一，我们在使用html5的技术开发手机app时，并不能像IOS，Android那样可以调取手机原生的相机功能，这是我们就要借助一些插件来时实现。

二，安装Cordoba的相机插件

1、在文件目录下，使用命令安装相机插件，命令如下：

cordova plugin add cordova-plugin-camera

2、使用”camera.getPicture“函数来调取相机

camera.getPicture(successCallback, errorCallback, options)

successCallback相机调取成功的回调函数。
errorCallback相机调取失败的回调函数。
options：相机参数设置。参数如下表：
名称 类型 默认 描述
质量 number 50 保存的图像的质量，表示为0-100的范围，其中100通常是全分辨率，没有文件压缩损失。（请注意，关于相机分辨率的信息不可用。）
destinationType DestinationType FILE_URI 选择返回值的格式。
sourceType的 PictureSourceType CAMERA 设置图片的来源。
allowEdit Boolean true 选择前允许简单编辑图像。
编码类型 EncodingType JPEG 选择返回的图像文件的编码。
targetWidth number   以像素为单位的缩放图像的宽度 必须与...一起使用targetHeight。长宽比保持不变。
targetHeight number   以像素为单位的高度缩放图像。必须与...一起使用targetWidth。长宽比保持不变。
媒体类型 MediaType PICTURE 设置要从中选择的媒体类型。只有当作品PictureSourceType是PHOTOLIBRARY或者SAVEDPHOTOALBUM。
correctOrientation Boolean   捕捉期间旋转图像以纠正设备的方向。
saveToPhotoAlbum Boolean   捕获后将图像保存到设备上的相册中。
popoverOptions CameraPopoverOptions   指定iPad中弹出位置的仅iOS选项。
cameraDirection Direction BACK 选择要使用的相机（正面或背面）。

相机参数配置属性如下：

Camera.DestinationType （文件类型）：属性值如下，

Name Type Default Description
DATA_URL number 0 返回base64编码的字符串。数据URL可能会占用大量内存，导致应用程序崩溃或内存不足错误。如果可能，请使用FILEURI或NATIVE_URI
FILE_URI number 1 返回文件uri（内容：// media / external / images / media / 2 for Android）
NATIVE_URI number 2 返回本地uri（例如，asset-library://... for iOS）

Camera.EncodingType （图片类型设置）: 属性值如下，

Name Type Default Description
JPEG number 0 返回JPEG编码的图像
PNG number 1 返回PNG编码的图像

Camera.MediaType（媒体类型设置） : 属性值如下，

Name Type Default Description
PICTURE number 0 只允许选择静止图像。默认。将返回通过DestinationType指定的格式
VIDEO number 1 只允许选择视频，只返回网址
ALLMEDIA number 2 允许从所有媒体类型中选择

Camera.PictureSourceType （图片来源设置）: 属性值如下，

Name Type Default Description
PHOTOLIBRARY number 0 从图片库中选择图片（与Android的SAVEDPHOTOALBUM相同）
CAMERA number 1 从相机拍照
SAVEDPHOTOALBUM number 2
从图片库中选择图片（与Android的PHOTOLIBRARY相同）

Camera.PopoverArrowDirection（匹配iOS UIPopoverArrowDirection常量以指定弹出窗口上的箭头位置。） : 属性值如下，

Name Type Default
ARROW_UP number 1
ARROW_DOWN number 2
ARROW_LEFT number 4
ARROW_RIGHT number 8
ARROW_ANY number 15

Camera.Direction （相机摄像头设置）: 属性值如下，

Name Type Default Description
BACK number 0 使用背面照相机
FRONT number 1 使用前置摄像头

例子：

// 打开相机openCamera: function (selection) {var srcType = Camera.PictureSourceType.CAMERA;  // 只能从相机里取var cameraOptions = uploadCtrl.setOptions(srcType);  // 配置参数函数
        navigator.camera.getPicture(uploadCtrl.cameraSuccess, uploadCtrl.cameraError, cameraOptions);},// 从相册获取图片
    openFilePicker(selection){var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;var pickerOptions = uploadCtrl.setOptions(srcType);navigator.camera.getPicture(uploadCtrl.cameraSuccess, uploadCtrl.cameraError, pickerOptions);},// 相机调取成功成功
    cameraSuccess(imageUri){// console.log('调取成功')
        uploadCtrl.createImg(imageUri);},// 相机调取失败
    cameraError(error){$$('.page[data-page="upload"] .imgUpload-overlay').removeClass('imgUpload-overlay-active'); // 选择器打开，遮罩层打开var obj =$$('.page[data-page="upload"]').find('.'+uploadCtrl.imgType);var index = uploadCtrl.imgType.substr(4);uploadCtrl.uploadTypeCondition[index].hasImg = false;obj.find('.img-item').removeClass('no');   // 上传模块隐藏obj.find('.has-img').addClass('no');  if(error !=='Camera cancelled.' && error !=='no image selected' && error !=='Selection cancelled.'){  // 相机取消myApp.alert('<span class="alertTip">'+error+'</span>',['']);}},// 相机参数配置
    setOptions(srcType){var options = {quality: 60,destinationType: Camera.DestinationType.FILE_URI,//图片的base64编码
            sourceType: srcType,encodingType: Camera.EncodingType.jpg,mediaType: Camera.MediaType.PICTURE,allowEdit: false,correctOrientation: true, //Corrects Android orientation quirkssaveToPhotoAlbum:false,  // 不允许保存
        };return options;},

转载于:https://www.cnblogs.com/zuoan-oopp/p/8006778.html

使用cordova，使html5也能像IOS，Android那样可以 调取手机的相机拍照功能相关推荐

  1. 适用ios,android,wp等平台手机emoji表情符号兼容方案

    一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji表情符号,在外国的手机短信里 ...

  2. android支付宝插件,GitHub - DmcSDK/cordova.plugin.alipay: cordova 支付宝支付插件，支持IOS Android。...

    cordova.plugin.alipay cordova 支付宝支付插件 cordova plugin add https://github.com/DmcSDK/cordova.plugin.al ...

  3. html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...

    使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...

  4. LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  5. html5实现ios长按图标后进入图标排序及删除功能的效果

    2019独角兽企业重金招聘Python工程师标准>>> html5实现ios长按图标后进入图标排序及删除功能的效果 我们知道在ios(国产定制安卓系统基本都有)设备上按下图标,图标就 ...

  6. Cordova打包的Vue项目在IOS无法拉起支付宝和微信支付

    背景 在用Cordova打包Vue项目并添加IOS平台时,在服务器后台没有报异常,且支付宝以及微信的调用的链接在 浏览器中能正常调用时,此时查看Cordova项目下的config.xml文件. 解决 ...

  7. 定义视频尺寸html,使HTML5视频海报与视频本身尺寸相同

    有谁知道如何调整HTML5视频海报的大小,使其适合视频本身的确切尺寸?使HTML5视频海报与视频本身尺寸相同 这里是代码: HTML: ​ CSS: video{ border:1px solid r ...

  8. html音频兼容ios,Safari和iOS上的Html5（音频）(Html5 (audio) on Safari iOS)

    Safari和iOS上的Html5(音频)(Html5 (audio) on Safari & iOS) 我正在开发一个Web应用程序,并且在PC上有Apple设备和Safari的兼容性问题. ...

  9. html5屏蔽ios长按复制,html5+CSS 实现禁止IOS长按复制粘贴功能

    html5+CSS 实现禁止IOS长按复制粘贴功能 因为在移动端APP需要实现长按执行别的事件,但是在iOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法. ...

  10. H5移动端ios/Android兼容性总结

    先说一下viewport 先上模板 <meta charset="utf-8"> <!--主要I是强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩 ...

最新文章

  1. Python Socket Programming
  2. python三种数据类型详解_最全面的Python数据类型知识点讲解
  3. hibernate jpa_JPA / Hibernate：基于版本的乐观并发控制
  4. 震惊！微软小冰公众号被封？示好国内，苹果拟推出特色版iPhone；谷歌更新Google Play支持名单：华为荣耀多款在列……...
  5. Linux系统编程：习题，父子进程通过信号通信，实现交替数数
  6. C++ 重载赋值运算符与11选5平台修复
  7. linux系统启动故障排除
  8. python 3.9 性能_Python 3.9 性能优化：更快的 list()、dict() 和 range() 等内置类型
  9. git管理github仓库详解
  10. 设置表格表头字体_Excel双栏和三栏斜线表头制作技巧
  11. 菜鸟的系统架构师如何应对交易系统激增的系统流量
  12. 数据库中ER图(一对多、一对一、多对多)讲解
  13. 《活出生命的意义》阅读笔记
  14. java中jlaber用法_laber的for属性
  15. 2019，关于我的故事
  16. OOM ResourceExhaustedError
  17. 孩子数学成绩不好怎么办_小孩子数学差怎么办
  18. 【U8+】用友登录账套年度提示以前版本的数据，请使用系统管理升级。
  19. 计算机软考高级职称论文,关于计算机软考，这里可以解决你所有的问题
  20. 新型复读机——微信语音

热门文章

  1. 等待线程3秒返回结果_Excel小白超级讨厌的计算，原来只用3秒就能出结果！
  2. java树遍历算法_Java递归算法实现目录树的遍历
  3. Lintcode129 Rehashing solution 题解
  4. 【你的数据库危机四伏 】
  5. 服务器存储技术千人群为：39472354
  6. 所有类型的基类Object，所有类型的基类Type
  7. C#区分中英文统计字符串的长度
  8. 总结01-bms-molecular-translation分子翻译大赛
  9. 比 matplotlib 效率高十倍的数据可视化神器
  10. Spring、SpringMVC、MyBatis整合