我正在开发一个面部识别系统，并且正在使用名为 Kairos 的 API。它允许我上传图像并检测是否有面孔。但我想创建一个按钮事件，允许我使用网络摄像头实时拍摄照片并检测它。我该怎么办？
<body>
<form method="post" enctype="multipart/form-data" action="form-post.php">
<input type="file" id="imageFile" name="file"><button type="button" id="testDetect">Submit</button>
</form>
<script>
$("#testDetect").click(function () {
var file = $('#imageFile')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
var imageData = parseImageData(reader.result);
var data = {};
data.image = imageData;
$.ajax({
url : "http://localhost/Karios/simple-detect/form-post.php",
type : "POST",
data : data,
dataType : 'text'
}).done(function(response) {
console.log(response)
if(response === true){
alert('fail!');
}
else{
alert('successs!');
}
})
}
}); 最佳答案
基于TAKE jpg webcam PHOTO with HTML5由于脚本较旧，因此进行了一些修改。
1 - 创建一个名为images的文件夹来存储文件
2 - 创建一个名为 html5-webcam-save.php 的文件，其中包含以下内容:
<?php
$rawData = $_POST['imgBase64'];
print $rawData;
$filteredData = explode(',', $rawData);
$unencoded = base64_decode($filteredData[1]);
$datime = date("Y-m-d-H.i.s", time() ) ; # - 3600*7
$userid = $_POST['userid'] ;
// name & save the image file
$fp = fopen('images/'.$datime.'-'.$userid.'.jpg', 'w');
fwrite($fp, $unencoded);
fclose($fp);
3 - 创建主页:
selfie_html5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia );
if (navigator.getUserMedia)
{
navigator.getUserMedia(
{
video:true,
audio:false
},
function(stream) { /* do-say something */ },
function(error) { alert('Something went wrong. (error code ' + error.code + ')');
return; }
);
}
else {
alert("Sorry, the browser you are using doesn't support the HTML5 webcam API");
}
</script>
<style>
.camcontent{
display: block;
position: relative;
overflow: hidden;
height: 480px;
margin: auto;
}
.cambuttons button {
border-radius: 15px;
font-size: 18px;
}
.cambuttons button:hover {
cursor: pointer;
border-radius: 15px;
background: #00dd00 ; /* green */
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
image_format= "jpeg",
jpeg_quality= 85,
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
//video.src = stream;
video.srcObject = stream;
video.play();
$("#snap").show();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
$("#snap").show();
}, errBack);
} else if(navigator.mozGetUserMedia) { // moz-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
$("#snap").show();
}, errBack);
}
// video.play(); these 2 lines must be repeated above 3 times
// $("#snap").show(); rather than here once, to keep "capture" hidden
// until after the webcam has been activated.
// Get-Save Snapshot - image
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
// the fade only works on firefox?
$("#video").fadeOut("slow");
$("#canvas").fadeIn("slow");
$("#snap").hide();
$("#reset").show();
$("#upload").show();
});
// reset - clear - to Capture New Photo
document.getElementById("reset").addEventListener("click", function() {
$("#video").fadeIn("slow");
$("#canvas").fadeOut("slow");
$("#snap").show();
$("#reset").hide();
$("#upload").hide();
});
// Upload image to sever
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL("image/jpeg", 0.85);
$("#uploading").show();
$.ajax({
type: "POST",
url: "html5-webcam-save.php",
data: {
imgBase64: dataUrl,
user: "Joe",
userid: 25
}
}).done(function(msg) {
console.log("saved");
$("#uploading").hide();
$("#uploaded").show();
});
});
}, false);
</script>
<div class="camcontent">
<video id="video" autoplay></video>
<canvas id="canvas" width="640" height="480"> </canvas>
</div>
<div class="cambuttons">
<button id="snap" style="display:none;"> Capture </button>
<button id="reset" style="display:none;"> Reset </button>
<button id="upload" style="display:none;"> Upload </button>
<br> <span id=uploading style="display:none;"> Uploading has begun . . . </span>
<span id=uploaded style="display:none;"> Success, your photo has been uploaded!</span>
</div>
</body>
</html>
注释:
我已经测试了代码，它按预期工作。如果遇到问题，请确保您对 images 文件夹具有写入权限。
文件夹结构e:
/
html5-webcam-save.php
selfie_html5.html
/images (folder)
关于javascript - 如何使用网络摄像头拍照并将其转换为图像文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44009823/