前言：
前端時間使用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包和不同的權限所需的配置。
