項(xiàng)目需求：在ie或chrome瀏覽器下往毡，調(diào)用電腦攝像頭（確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺(tái)式機(jī)）靶溜，進(jìn)行人臉圖像采集預(yù)覽开瞭，并將圖片的base64碼傳入到后臺(tái)進(jìn)行后續(xù)操作。該demo適用于chrome和ie10以上罩息，ie10以下版本的未測(cè)試嗤详。
前期插件準(zhǔn)備
測(cè)試頁(yè)面
測(cè)試前注意事項(xiàng):
- 測(cè)試html文件必須使用http請(qǐng)求方式打開瓷炮，不可以通過本地file://請(qǐng)求直接打開葱色，會(huì)報(bào)錯(cuò)：webcam.capture is not a function
- 在進(jìn)行chrome和ie同時(shí)調(diào)試，或者打開多個(gè)頁(yè)面調(diào)試的時(shí)候娘香，務(wù)必關(guān)閉前一頁(yè)面苍狰，解除前頁(yè)面對(duì)攝像頭的占用，否則后一頁(yè)面調(diào)用攝像頭后會(huì)顯示黑屏或白屏
- 因?yàn)閏onsole.log打印的日志長(zhǎng)度是有限制的烘绽，所以直接通過console.log打印的base64碼是不完整的淋昭，因此將該base64碼復(fù)制到瀏覽器地址欄打開進(jìn)行圖像預(yù)覽的時(shí)會(huì)無法顯示圖片。
解決辦法：我們可以將完整的base64碼直接設(shè)置給預(yù)覽img的src安接，然后通過開發(fā)者工具F12取得的base64碼便是完整的
base64image.setAttribute('src', base64);
html代碼：
以下代碼是基于原作者的demo頁(yè)進(jìn)行的部分修改翔忽，并使用了兩種預(yù)覽模式（canvas和img），根據(jù)需求選擇使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>webcam</title>
<style type="text/css">
#webcam {
width: auto;
height: auto;
float: left;
}
#base64image {
display: block;
width: 320px;
height: 240px;
}
</style>
<!-- 基本的jquery引用，1.5版本以上 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- webcam插件引用 -->
<script src="jquery.webcam.js"></script>
</head>
<body>
<div id="webcam"></div>
<canvas id="canvas" width="320" height="240"></canvas>
<input id="snapBtn" type="button" value="拍照" />
<img id="base64image" src='' />
<script type="text/javascript">
var pos = 0,
ctx = null,
image = [];
var w = 320;
var h = 240;
$(document).ready(function() {
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "jscam_canvas_only.swf", // 這里引入swf文件歇式，注意路徑
onTick: function(remain) {},
onSave: function(data) {
var col = data.split(";");
var img = image;
for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos += 4;
}
if(pos >= 4 * 320 * 240) {
// 將圖片顯示到canvas中
ctx.putImageData(img, 0, 0);
// 取得圖片的base64碼
var base64 = canvas.toDataURL("image/png");
// 將圖片base64碼設(shè)置給img
var base64image = document.getElementById('base64image');
base64image.setAttribute('src', base64);
pos = 0;
}
},
onCapture: function() {
webcam.save();
// Show a flash for example
},
debug: function(type, string) {
console.log('type:' + type + ',string:' + string);
// Write debug information to console.log() or a div
},
onLoad: function() {
// Page load
}
});
window.addEventListener("load", function() {
var canvas = document.getElementById("canvas");
if(canvas.getContext) {
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 320, 240);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 129, 89);
}
image = ctx.getImageData(0, 0, 320, 240);
}
}, false);
$('#snapBtn').on('click', function() {
webcam.capture();
});
});
</script>
</body>
</html>
