使用HTML5+调用手机摄像头和相册
前言:
实例:
- 首先是html代码,很简单,就是给一个添加按钮,点击触发事件,这里我就不把css文件放出来,大家知道是一个添加按钮就行。
<h2 class="title-detail">图片描述</h2><input type="hidden" id="picIndex" value="0"><div id='image-list' class="row image-list"><!-- <input id="upload_image" type="file" name="image" accept="image/*" /> --><div class="image-item space" οnclick="showActionSheet()"><div class="image-up"></div></div></div>
- 后面我们来看下具体的js代码,按照上面我们说的方法共分为5个方法,具体如下:
//图片显示function showPics(url,name){ //根据路径读取到文件 plus.io.resolveLocalFileSystemURL(url,function(entry){entry.file( function(file){var fileReader = new plus.io.FileReader();fileReader.readAsDataURL(file); fileReader.onloadend = function(e) {var picUrl = e.target.result.toString();var picIndex = $("#picIndex").val();var nowIndex = parseInt(picIndex)+1;$("#picIndex").val(nowIndex);var html = '';html += '<div class="image-item " id="item'+nowIndex+'">';html += '<div class="image-close" οnclick="delPic('+nowIndex+')">X</div>';html += '<div><img src="'+picUrl+'" class="upload_img" style="width:100%;height:100%;"/></div>';html += '</div>';html += $("#image-list").html();$("#image-list").html(html); }});}); }//压缩图片 function compressImage(url,filename){ var name="_doc/upload/"+filename;plus.zip.compressImage({ src:url,//src: (String 类型 )压缩转换原始图片的路径 dst:name,//压缩转换目标图片的路径 quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100 overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件 }, function(zip) {//页面显示图片showPics(zip.target,name);},function(error) { plus.nativeUI.toast("压缩图片失败,请稍候再试"); }); } //调用手机摄像头并拍照function getImage() { var cmr = plus.camera.getCamera(); cmr.captureImage(function(p) { plus.io.resolveLocalFileSystemURL(p, function(entry) { compressImage(entry.toLocalURL(),entry.name); }, function(e) { plus.nativeUI.toast("读取拍照文件错误:" + e.message); }); }, function(e) { }, { filter: 'image' }); }//从相册选择照片function galleryImgs() { plus.gallery.pick(function(e) { var name = e.substr(e.lastIndexOf('/') + 1);compressImage(e,name);}, function(e) { }, { filter: "image" }); }//点击事件,弹出选择摄像头和相册的选项function showActionSheet() { var bts = [{ title: "拍照" }, { title: "从相册选择" }]; plus.nativeUI.actionSheet({ cancel: "取消", buttons: bts }, function(e) { if (e.index == 1) { getImage(); } else if (e.index == 2) { galleryImgs(); } } ); }
- 有几点进行说明下:(1):压缩图片方法,这里我采用的是重新写一个新文件 (2):图片显示方法,该方法很重要。因为我这边坐的是WEB端APP,页面都由服务器返回,我们可以拿到的是手机本地的图片,网上很多说法是直接拿文件路径就显示了,但是我却怎么都没显示出来。所以才用了FileReader将本地文件读取过来,e.target.result.toString();这个方法返回的就是我们的图片的base64编码,所以你看到下面我是动态拼HTML页面,直接将该内容赋值给img标签的src就可以直接显示图片。【这里曾经纠结很久】有了这个base64编码的url,我们就可以直接上传到后台。
使用注意:
- Hbuilder:这个是一个很方便的web开发工具,可以在线打包APP。【由于网络问题,我上传不了图片,尽量文字描述】我们需要在Hbuilder里面建一个APP项目,点开manifest.json文件,这个文件就是我们APP的配置信息,下面导航栏分别为:应用信息、图标配置、启动Flash配置、SDK配置、权限模块配置等。一般我们需要配下应用信息(APP的名字、入口),图标,启动flash(可以选择启动图片),SDK配置一般是一些地图、支付、推送等。重点来了,我们如果使用HTML5+,需要在模块权限配置里面,选择我们用到的功能,比如我们用到了plus.nativeUI.*,就需要选择NativeUI(原生UI)模块,也就是说,我们用了plus.xx.*,就需要勾选相应的模块。【这个manifest.json是可视化界面,大家下载安装就能明白】
- Android环境:相对Hbuilder,Android环境稍微复杂一点,由于我没有在Android环境里搞过这个,这里只是介绍下Hbuilder官网的一些使用说明。
举例说明:例如我们需要使用Camera对象,需要做如下配置:
2.1:添加camera.jar。
2.2:AndroidManifest.xml permission节点中添加:
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera"/>2.3:properties.xml features节点中添加:
<featurename="Camera" value="io.dcloud.js.camera.CameraFeatureImpl"/>
这个配置方式在Hbuilder的官网上可以下载,里面包含所有的jar包和不同的权限所需的配置。
使用HTML5+调用手机摄像头和相册相关推荐
- html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5作了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了很多时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
- html5调用手机摄像头和相册,h5 调用手机摄像头/相册
html 部分 js 部分 getBase64: function (file, callback) { var maxWidth = 640 if (file.files && fi ...
- html5 调用手机摄像头详解
html5 调用手机摄像头详解 首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的. 注意: 我们采用的是 640X480的分辨率,如 ...
- 原生html调手机拍照,如何让HTML5调用手机摄像头拍照——实践就是一切
原文:如何让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码 HTML5 Th ...
- html5调用手机摄像头
在一个响应式网站项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 input fil ...
- html5调用手机摄像头,实现拍照上传功能
http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手机网站,想实现手 ...
- 使用JS调用手机摄像头和相册
Html <h2 class="title-detail">图片描述</h2> <input type="hidden" id=& ...
- Html5调用手机摄像头并实现人脸识别
需求 混合App开发,原生壳子+webApp,在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容,同时可以手动拍照并进行人脸识别,将识别结果显示在网页上. 技术栈 vue.Html5.vi ...
- 安卓调用手机摄像头和相册
文章目录 调用摄像头和相册 调用摄像头进行拍照 从相册当中选取图片 调用摄像头和相册 调用摄像头进行拍照 新建一个CameraAlbumTest项目,修改activity_main.xml中的代码 & ...
最新文章
- Caliburn笔记-基本Command(wpf框架)
- 计算机视觉,基于skimage对图像阈值分割的学习
- Python架构(二)
- P4146 序列终结者 平衡树 + lazy维护
- Oracle MySQL社区版与Oracle MySQL企业版特征对比
- (转)iOS-蓝牙学习资源博文收集
- Perl 学习手札之十三:building function
- 能破解百度网盘提取码,云盘万能钥匙宣布关闭!
- 远程时间管理软件 - 工时通
- 【Matlab 六自由度机器人】运动学逆解(附MATLAB机器人逆解代码)
- 深度学习结合SLAM的研究思路/成果整理之(二)语义SLAM 端到端
- 图像处理的相关数学知识
- 基于springboot的ShardingSphere5.2.1的分库分表的解决方案之数据加密之RSA的解决方案(九)
- 免费H5页面制作工具大汇总
- Redis系列总结--这几点你会了吗?
- VL02N货物移动报错:消息号M7093 “对于移动类型643和账户XXX业务范围(033)的不同字段选择“
- android audiorecord插上耳机录音由dmic切换到耳机录音
- 2022年Servlect课时十七——什么是监听器@@回顾过滤器@@Servlect
- sql位运算符【(位与)、~(位非)、|(位或)、^(位异或)】与位移
- 如何用python做后端写网页-flask框架
热门文章
- setHeader方法的参数说明
- Linux 下rsync命令详细整理
- 计算机管理恢复分区,如何在Windows中擦除恢复分区 | MOS86
- php面试题2--php面试题系列
- TCP TIME_WAIT解决方案
- Precision, Recall, BLEU and ROUGE
- AI公开课之NLP:19.04.04李航—字节跳动AILab总监《深度学习与自然语言处理:评析与展望》课堂笔记以及个人感悟
- UML 之 UML中的关系
- 全志T3开发板——嵌入式入门学习测试教程(4)
- 三星note20u计算机功能,三星Note20Ultra隐藏功能有哪些,三星Note20Ultra使用教程