前言:
前端时间使用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">
-
- <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);
- <span style="white-space:pre"> </span> 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);
- <span style="white-space:pre"> </span>}
- });
- });
- }
-
- function compressImage(url,filename){
- var name="_doc/upload/"+filename;
- plus.zip.compressImage({
- src:url,
- dst:name,
- quality:40,
- overwrite:true
- },
- 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包和不同的权限所需的配置。