前言：

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

实例：

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

首先是html代码，很简单，就是给一个添加按钮，点击触发事件，这里我就不把css文件放出来，你们知道是一个添加按钮就行。

图片描述

后面咱们来看下具体的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 += '

';

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();

}

}

);

}html

有几点进行说明下：(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。android

2.2：AndroidManifest.xml permission节点中添加：web

json

2.3：properties.xml features节点中添加：服务器

网络

这个配置方式在Hbuilder的官网上能够下载，里面包含全部的jar包和不一样的权限所需的配置。

工具