Good I am creating in my application a registration form where the user fill in the fields of name and identification and include the option of accessing the webcam of the same and this can take the photo and send these are sent to the base of data, my question is how do I validate the image taken along with the other elements of the form and then send it to the database.
here is the index.php code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>How to Use Webcam In PHP</title>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-6">
<div class="text-center">
<div id="camera_info"></div>
<div id="camera"></div><br>
<button id="take_snapshots" class="btn btn-success btn-sm">Tomar foto</button>
</div>
</div>
<div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th>Image</th><th>Image Name</th>
</tr>
</thead>
<tbody id="imagelist">
</tbody>
</table>
</div>
<form action="valida.php" method="post" id="formID">
<label for="nameID">Nombre</label>
<input type="text" id="nameID" placeholder="Ingrese su nombre" name="nameForm" required>
<label for="cedulaID">Cedula</label>
<input type="text" id="cedulaID" placeholder="Ingrese su cedula" name="idForm" required>
<input type="submit" id="submit" value="Enviar resultados" name="submitForm">
</form>
</div> <!-- /container -->
</body>
</html>
<style>
.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width: 500px;
}
#camera {
width: 100%;
height: 350px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jpeg_camera/jpeg_camera_with_dependencies.min.js" type="text/javascript"></script>
<script>
var options = {
shutter_ogg_url: "jpeg_camera/shutter.ogg",
shutter_mp3_url: "jpeg_camera/shutter.mp3",
swf_url: "jpeg_camera/jpeg_camera.swf",
};
var camera = new JpegCamera("#camera", options);
$('#take_snapshots').click(function(){
var snapshot = camera.capture();
snapshot.show();
snapshot.upload({api_url: "action.php"}).done(function(response) {
$('#imagelist').prepend("<tr><td><img src='"+response+"' width='100px' height='100px'></td><td>"+response+"</td></tr>");
}).fail(function(response) {
alert("Upload failed with status " + response);
});
})
function done(){
$('#snapshots').html("uploaded");
}
</script>
here is the kind of php that sends the image to the database
<?php
require_once( dirname( __FILE__ ) . '/connectionClass.php' );
class webcamClass extends connectionClass{
private $imageFolder="webcamImage/";
//This function will create a new name for every image captured using the current data and time.
private function getNameWithPath(){
$name = $this->imageFolder.date('YmdHis').".jpg";
return $name;
}
//function will get the image data and save it to the provided path with the name and save it to the database
public function showImage(){
$file = file_put_contents( $this->getNameWithPath(), file_get_contents('php://input') );
if(!$file){
return "ERROR: Failed to write data to ".$this->getNameWithPath().", check permissions\n";
}
else
{
$this->saveImageToDatabase($this->getNameWithPath()); // this line is for saveing image to database
return $this->getNameWithPath();
}
}
//function for changing the image to base64
public function changeImagetoBase64($image){
$path = $image;
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
return $base64;
}
public function saveImageToDatabase($imageurl){
$image=$imageurl;
// $image= $this->changeImagetoBase64($image); //if you want to go for base64 encode than enable this line
if($image){
$query="Insert into snapshot (Image) values('$image')";
$result= $this->query($query);
if($result){
return "Image saved to database";
}
else{
return "Image not saved to database";
}
}
}
}