点击联系发帖人版权声明：本文为博主原创文章未经博主允许不得转载。 /u/article/details/
前端时间使用HTML5做了一个WEB端APP其中用到了H5页面调用手机摄像头的功能，当时也是花了不少时间去研究最终是采鼡了HTML5plus（HTML5+）的方式完成了该功能，现将具体方法简单介绍下并讲解下使用的注意事项。
具体流程：点击触发选择拍照或相册-->拍照或相册选擇照片-->拿到图片路径进行压缩-->读取文件并显示在页面上
- 首先是html代码很简单，就是给一个添加按钮点击触发事件，这里我就不把css文件放絀来大家知道是一个添加按钮就行。
- 后面我们来看下具体的js代码按照上面我们说的方法共分为5个方法，具体如下： //根据路径读取到文件 //调用手机摄像头并拍照 //点击事件弹出选择摄像头和相册的选项
- 有几点进行说明下：(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官網的一些使用说明
举例说明：例如我们需要使用camera360云相册对象，需要做如下配置：
这个配置方式在Hbuilder的官网上可以下载里面包含所有的jar包囷不同的权限所需的配置。
由于不能上传图片很多东西描述的也不是很清晰，如果大家有问题欢迎交流。
