- 官方文檔：https://www.xarg.org/project/jquery-webcam-plugin/
- 官方文檔php方法中 沒有考慮color 爲空的時候，生不成圖片。 最終獲取base64編碼格式的圖片，傳給第三方進行圖片 和身份證的對比
- html文件
- <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>調用攝像頭</title>
<style type="text/css">
#webcam { border: 1px solid #666666; width: 320px; height: 240px; }
.btn { width: 320px; height: auto; margin: 5px 0px; }
.btn input[type=button] { width: 150px; height: 50px; line-height: 50px; margin: 3px; }
</style>
<script src="__STATIC__/js/jquery-1.7.1.min.js"></script>
<script src="__STATIC__/js/jquery.webcam.min.js"></script>
<script src="__STATIC__/js/jquery.webcam.js"></script>
</head>
<body>
<div id="webcam"></div>
<div class="btn">
<input type="button" value="拍照" id="saveBtn" οnclick="savePhoto();"/>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
var pos = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = 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;
}
//上傳的是圖片的base64編碼後的格式
if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
$.post("{:url('image/index/getImage')}", {type: "data", image: canvas.toDataURL("image/png")},
function(msg){
console.log(5);
console.log(msg);
pos = 0;
// location.href = "{:url('image/index/index')}";
});
}
};
} else {
//ie7-ie8會在這裏處理圖片上傳到方法中，上傳的是圖片的數據流
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("{:url('image/index/getImage')}", {type: "pixel", image: image.join('|')},function(msg){
console.log(6);
console.log(msg);
pos = 0;
//如果方法保存圖片到本地
//$("#img").attr("src", "方法返回的圖片保存的地址");
// location.href = "{:url('image/index/index')}";
});
}
};
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "__STATIC__/js/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function () {
webcam.save();
},
debug: function (type, string) {
console.log(type + ": " + string);
}
});
});
//拍照
function savePhoto(){
webcam.capture();
}
</script>
php方法：
public function getImage(){
if ($_POST['type'] == "pixel") {
//return 1;
$m = $_POST['image'];
//$image=$this->createImage($m);
$time = time();
$imgname = $time.'.png';
$path = './uploads/image/'.$imgname;
$this->createImage($m,$path);
if(file_exists($path)){
$img1 = $this->_imgToBase64($path);
return $img1;
}
else{
return 2;
}
} else {
return $_POST['image'];
$im = imagecreatefrompng($_POST['image']);
}
}
public function createImage($m,$path){
$im = imagecreatetruecolor(320, 240);
foreach (explode("|", $m) as $y => $csv) {
foreach (explode(";", $csv) as $x => $color) {
if($color != NULL){
imagesetpixel($im, $x, $y, $color);
//echo $x.'-'.$y.'-'.$color.'<br>';
}
}
}
imagepng($im,$path);
imagedestroy($im);
}
private function _imgToBase64($file){
if($fp = fopen($file,"rb", 0))
{
$gambar = fread($fp,filesize($file));
$base64 = chunk_split(base64_encode($gambar));
fclose($fp);
// 輸出
$encode = '<img src="data:image/jpg/png/gif;base64,' . $base64 .'" >';
return $base64;
}
}
