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