使用HTML5+调用手机摄像头和相册
2016-11-17 11:12
489 查看
前言:
前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究。最终是采用了HTML5plus(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" onclick="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" onclick="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在线打包,当然外壳也可以是Android环境打包,下面具体讲下要注意的地方。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+调用手机摄像头和相册
- 使用HTML5+调用手机摄像头和相册
- HTML5 调用手机相册和摄像头的方法并上传微信下测试通过
- AngularJS中使用HTML5手机摄像头拍照
- HTML5调用手机摄像头拍照的实现思路及代码
- HTML5 调用手机摄像头 Demo
- HLMT5中input实现多种文件上传,视频上传,图片上传,调用手机摄像头,照相机,相册功能
- android开发之调用手机的摄像头使用MediaRecorder录像并播放
- html5调用手机摄像头,实现拍照上传功能
- HMTL5调用手机摄像头拍照和获取相册
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
- WebApp调用手机相册或摄像头、拨打电话
- AngularJS中使用HTML5手机摄像头拍照
- HTML5使用 getUserMedia方法调用本地摄像头拍照
- AngularJS中使用HTML5手机摄像头拍照
- 网站建设中使用HTML5实现使用手机摄像头拍照上传的功能
- HTML5 使用FileReader实现调用相册、拍照功能
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- 使用HTML5技术控制电脑或手机上的摄像头