使用HTML5+调用手机摄像头和相册

前言：

前端时间使用HTML5做了一个WEB端APP，其中用到了H5页面调用手机摄像头的功能，当时也是花了不少时间去研究。最终是采用了HTML5plus（HTML5+）的方式完成了该功能，现将具体方法简单介绍下，并讲解下使用的注意事项。

实例：

具体流程：点击触发选择拍照或相册-->拍照或相册选择照片-->拿到图片路径进行压缩-->读取文件并显示在页面上

1. 首先是html代码，很简单，就是给一个添加按钮，点击触发事件，这里我就不把css文件放出来，大家知道是一个添加按钮就行。
   [html] view plain copy

   1. <h2 class="title-detail">  
   2.                     图片描述  
   3.                 </h2>  
   4.                 <input type="hidden" id="picIndex" value="0">  
   5.                 <div id='image-list' class="row image-list">  
   6.                     <!-- <input id="upload_image" type="file" name="image" accept="image/*" /> -->  
   7.                      <div class="image-item space" onclick="showActionSheet()">  
   8.                         <div class="image-up"></div>  
   9.                     </div>  
   10.                 </div>  
   
   
2. 后面我们来看下具体的js代码，按照上面我们说的方法共分为5个方法，具体如下：
   [javascript] view plain copy

   1. //图片显示  
   2.        function showPics(url,name){          
   3.          //根据路径读取到文件   
   4.            plus.io.resolveLocalFileSystemURL(url,function(entry){  
   5.                entry.file( function(file){  
   6.                    var fileReader = new plus.io.FileReader();  
   7.                    fileReader.readAsDataURL(file);  
   8.                    <span style="white-space:pre">   </span>   fileReader.onloadend = function(e) {  
   9.                            var picUrl = e.target.result.toString();  
   10.                            var picIndex = $("#picIndex").val();  
   11.                         var nowIndex = parseInt(picIndex)+1;  
   12.                         $("#picIndex").val(nowIndex);  
   13.                         var html = '';  
   14.                         html += '<div class="image-item " id="item'+nowIndex+'">';  
   15.                         html += '<div class="image-close" onclick="delPic('+nowIndex+')">X</div>';  
   16.                         html += '<div><img src="'+picUrl+'" class="upload_img" style="width:100%;height:100%;"/></div>';  
   17.                         html += '</div>';  
   18.                         html += $("#image-list").html();  
   19.                         $("#image-list").html(html);   
   20.                    <span style="white-space:pre">   </span>}  
   21.                });  
   22.           });   
   23.        }  
   24.         //压缩图片    
   25.        function compressImage(url,filename){    
   26.            var name="_doc/upload/"+filename;  
   27.            plus.zip.compressImage({    
   28.                    src:url,//src: (String 类型 )压缩转换原始图片的路径    
   29.                    dst:name,//压缩转换目标图片的路径    
   30.                    quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100    
   31.                    overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件    
   32.                },    
   33.                function(zip) {  
   34.                    //页面显示图片  
   35.                    showPics(zip.target,name);  
   36.                },function(error) {    
   37.                    plus.nativeUI.toast("压缩图片失败，请稍候再试");    
   38.            });    
   39.        }   
   40.         
   41.         //调用手机摄像头并拍照  
   42.        function getImage() {    
   43.            var cmr = plus.camera.getCamera();    
   44.            cmr.captureImage(function(p) {    
   45.                plus.io.resolveLocalFileSystemURL(p, function(entry) {    
   46.                    compressImage(entry.toLocalURL(),entry.name);    
   47.                }, function(e) {    
   48.                    plus.nativeUI.toast("读取拍照文件错误：" + e.message);    
   49.                });    
   50.            }, function(e) {    
   51.            }, {    
   52.                filter: 'image'   
   53.            });    
   54.        }  
   55.        //从相册选择照片  
   56.        function galleryImgs() {    
   57.             plus.gallery.pick(function(e) {    
   58.                 var name = e.substr(e.lastIndexOf('/') + 1);  
   59.                compressImage(e,name);  
   60.             }, function(e) {    
   61.             }, {    
   62.                 filter: "image"    
   63.             });    
   64.         }  
   65.          
   66.        //点击事件，弹出选择摄像头和相册的选项  
   67.         function showActionSheet() {    
   68.             var bts = [{    
   69.                 title: "拍照"    
   70.             }, {    
   71.                 title: "从相册选择"    
   72.             }];    
   73.             plus.nativeUI.actionSheet({    
   74.                     cancel: "取消",    
   75.                     buttons: bts    
   76.                 },    
   77.                 function(e) {    
   78.                     if (e.index == 1) {    
   79.                         getImage();    
   80.                     } else if (e.index == 2) {    
   81.                         galleryImgs();    
   82.                     }    
   83.                 }    
   84.             );    
   85.         }  
   
   
3. 有几点进行说明下：(1)：压缩图片方法，这里我采用的是重新写一个新文件  (2)：图片显示方法，该方法很重要。因为我这边坐的是WEB端APP，页面都由服务器返回，我们可以拿到的是手机本地的图片，网上很多说法是直接拿文件路径就显示了，但是我却怎么都没显示出来。所以才用了FileReader将本地文件读取过来，e.target.result.toString();这个方法返回的就是我们的图片的base64编码，所以你看到下面我是动态拼HTML页面，直接将该内容赋值给img标签的src就可以直接显示图片。【这里曾经纠结很久】有了这个base64编码的url，我们就可以直接上传到后台。

使用注意：

这里主要讲打包工具不同需要做的工作也不太一样。我这边是用的Hbuilder在线打包，当然外壳也可以是Android环境打包，下面具体讲下要注意的地方。

1. Hbuilder：这个是一个很方便的web开发工具，可以在线打包APP。【由于网络问题，我上传不了图片，尽量文字描述】我们需要在Hbuilder里面建一个APP项目，点开manifest.json文件，这个文件就是我们APP的配置信息，下面导航栏分别为：应用信息、图标配置、启动Flash配置、SDK配置、权限模块配置等。一般我们需要配下应用信息（APP的名字、入口），图标，启动flash(可以选择启动图片)，SDK配置一般是一些地图、支付、推送等。重点来了，我们如果使用HTML5+，需要在模块权限配置里面，选择我们用到的功能，比如我们用到了plus.nativeUI.*，就需要选择NativeUI(原生UI)模块，也就是说，我们用了plus.xx.*，就需要勾选相应的模块。【这个manifest.json是可视化界面，大家下载安装就能明白】
2. 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包和不同的权限所需的配置。