如何解决如何以php形式集成javascript网络摄像头并将其保存到目录中的数据库和图像文件夹中？
我在 PHP 页面上创建了一个 HTML 注册表单，我必须将网络摄像头代码集成到表单中，网络摄像头代码单独工作得很好，但无法将其集成到表单中，即图像被捕获但图像未存储到系统上的文件夹中。以及如何仅在我们点击方块时触发相机功能？提前致谢。
基本表单代码-form.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="asset/jquery.signature.min.js"></script>
<link rel="stylesheet" type="text/css" href="asset/jquery.signature.css">
<script type="text/javascript" src="webcam.min.js"></script>
</head>
<body>
<form action= "details_entry.php" method="post">
<table border="1" align="center">
<tr>
<td>
<label> Name </label></td>
<td><input type="text" name="per_name">
</td>
</tr>
<tr>
<td>
<label> Designation </label></td>
<td><input type="text" name="designation">
</td>
</tr>
<tr>
<td>
<label> Name of the organisation/Company </label></td>
<td><input type="text" name="company_name">
</td>
</tr>
<tr>
<td>
<label> Email ID </label></td>
<td><input type="email" name="email">
</td>
</tr>
<tr>
<td>
<label> Phone number </label></td>
<td><input type="phone" name="phone">
</td>
</tr>
<tr>
<td>
<label> Valid document </label></td>
<td><input type="file" name="documents">
</td>
</tr>
<tr>
<td>
<label> Signature </label> </td>
<td>
<div id="canvasDiv"></div>
<br>
<button type="button" class="btn btn-danger" id="reset-btn">Clear</button>
<button type="button" class="btn btn-success" id="btn-save">Save</button>
</div>
<form id="signatureform" action="" style="display:none" method="post">
<input type="hidden" id="signature" name="signature">
<input type="hidden" name="signaturesubmit" value="1">
</form>
</div>
</td>
</tr>
<tr>
<td>
<label> Click image </label>
</td>
<td>
<center>
<div id="my_camera"></div>
<br />
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<div id="results" ></div>
</center>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="save" value="Submit" style="font-size:20px"></td>
</tr>
</table>
</form>
</body>
<style>
#my_camera{
width: 320px;
height: 240px;
border: 1px solid black;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>
$(document).ready(() => {
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('id','canvas');
canvasDiv.appendChild(canvas);
$("#canvas").attr('height',$("#canvasDiv").outerHeight());
$("#canvas").attr('width',$("#canvasDiv").width());
if (typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e) {
var offset = $(this).offset()
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - offset.left,e.pageY - offset.top);
redraw();
});
$('#canvas').mousemove(function(e) {
if (paint) {
var offset = $(this).offset()
//addClick(e.pageX - this.offsetLeft,e.pageY - this.offsetTop,true);
addClick(e.pageX - offset.left,e.pageY - offset.top,true);
console.log(e.pageX,offset.left,e.pageY,offset.top);
redraw();
}
});
$('#canvas').mouseup(function(e) {
paint = false;
});
$('#canvas').mouseleave(function(e) {
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x,y,dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
$("#reset-btn").click(function() {
context.clearRect(0,window.innerWidth,window.innerWidth);
clickX = [];
clickY = [];
clickDrag = [];
});
$(document).on('click','#btn-save',function() {
var mycanvas = document.getElementById('canvas');
var img = mycanvas.toDataURL("image/png");
anchor = $("#signature");
anchor.val(img);
$("#signatureform").submit();
});
var drawing = false;
var mousePos = {
x: 0,y: 0
};
var lastPos = mousePos;
canvas.addEventListener("touchstart",function(e) {
mousePos = getTouchPos(canvas,e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown",{
clientX: touch.clientX,clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
},false);
canvas.addEventListener("touchend",function(e) {
var mouseEvent = new MouseEvent("mouseup",{});
canvas.dispatchEvent(mouseEvent);
},false);
canvas.addEventListener("touchmove",function(e) {
var touch = e.touches[0];
var offset = $('#canvas').offset();
var mouseEvent = new MouseEvent("mousemove",false);
// Get the position of a touch relative to the canvas
function getTouchPos(canvasDiv,touchEvent) {
var rect = canvasDiv.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,y: touchEvent.touches[0].clientY - rect.top
};
}
var elem = document.getElementById("canvas");
var defaultPrevent = function(e) {
e.preventDefault();
}
elem.addEventListener("touchstart",defaultPrevent);
elem.addEventListener("touchmove",defaultPrevent);
function redraw() {
//
lastPos = mousePos;
for (var i = 0; i < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1],clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1,clickY[i]);
}
context.lineTo(clickX[i],clickY[i]);
context.closePath();
context.stroke();
}
}
})
</script>
<script type="text/javascript" src="webcam.min.js"></script>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
// Configure a few settings and attach camera
Webcam.set({
width: 320,height: 240,image_format: 'jpeg',jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
Webcam.upload( data_uri,'saveimage.php',function(code,text,Name) {
document.getElementById('results').innerHTML =
'' +
'<img src="' + data_uri + '"style=" width: 300px;">';
} );
} );
}
</script>
</html>
php 连接- details_entry.php
<?php
$server_name="localhost";
$username="root";
$password="";
$database_name="database123";
$conn=mysqli_connect($server_name,$username,$password,$database_name);
if(!$conn)
{
die("Connection failed:" . mysqli_connect_error());
}
$ip_address = $_SERVER['REMOTE_ADDR'];
//get user ip address details with geoplugin.net
$geopluginURL = 'http://www.geoplugin.net/php.gp?id='.$ip_address;
$addrDetailsArr = unserialize(file_get_contents($geopluginURL));
//get city name by return array
$city = $addrDetailsArr['geoplugin_city'];
//get country name by return array
$country = $addrDetailsArr['geoplugin_countryName'];
$continent = $addrDetailsArr['geoplugin_continentName'];
/*echo '<strong>IP Address</strong>: '.$ip_address.'<br>';
echo '<strong>Continent</strong>: '.$addrDetailsArr['geoplugin_continentName'].'<br>';
echo '<strong>Country</strong>: '.$country.'<br>';
echo '<strong>City</strong>: '.$city.'<br>'; */
if(isset($_POST['save']))
{
$per_name= $_POST['per_name'];
$designation= $_POST['designation'];
$company_name= $_POST['company_name'];
$email= $_POST['email'];
$phone= $_POST['phone'];
$documents = $_POST['documents'];
$signature = $_POST['signature'];
$signatureFileName = uniqid().'.png';
$signature = str_replace('data:image/png;base64,','',$signature);
$signature = str_replace(' ','+',$signature);
$data = base64_decode($signature);
$file = 'signatures/'.$signatureFileName;
file_put_contents($file,$data);
$msg = "<div class='alert alert-success'>Signature Uploaded</div>";
$sql_query = "INSERT INTO entry_details
(per_name,designation,company_name,email,phone,document,signature,ip_address,continent,country,city)
VALUES
('$per_name','$designation','$company_name','$email','$phone','$documents','$signatureFileName','$ip_address','$continent','$country','$city')";
$filename = time() . '.jpg';
$filepath = 'images/';
if(!is_dir($filepath))
mkdir($filepath);
if(isset($_FILES['webcam'])){
move_uploaded_file($_FILES['webcam']['tmp_name'],$filepath.$filename);
$sql="Insert into card(photo) values('$filename')";
$result=mysqli_query($con,$sql);
echo $filepath.$filename;
}
}
if(mysqli_query($conn,$sql_query))
{
echo"Details entered successfully !";
}
else
{
echo"error: " . $sql . "" . mysqli_error($conn);
}
mysqli_close($conn);
?>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
