I am creating a registration system where there will be a folder made from the user’s input and an image will be put into that folder for that person. The folder is created, but the image is just an empty jpg file.
register.php:
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Register</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<style type="text/css">
#results { padding:20px; border:1px solid; background:#ccc; }
#my_camera {transform: rotateY(180deg);}
</style>
</head>
<body>
<div >
<form method="POST" action="saveimage.php">
<div >
<h1>Register</h1>
<p>Please fill in this form to register yourself.</p>
<hr>
<label for="username"><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="username" required>
<hr>
<div >
<div id="my_camera"></div>
<br/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="hidden" name="image" >
</div>
<div >
<div id="results">Captured Image</div>
</div>
<div class="col-md-12 text-center">
<br/>
<button class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 490,
height: 390,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
function take_snapshot() {
Webcam.snap( function(data_uri) {
$(".image-tag").val(data_uri);
document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
console.log(data_uri);
} );
}
</script>
</body>
</html>saveimage.php:
$theName = $_POST['username'];
$theDestinationPath = "images/".$theName;
if (!file_exists($theDestinationPath))
{
mkdir($theDestinationPath,0755,true); // make the folder
}
else
{
echo "<h1> You are already registered! Head back to previous page to login </h1>";
}
$img = $_POST['image'];
$folderPath = $theDestinationPath."/";
$image_parts = explode(";base64,", $img);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$imgName = 1;
$fileName = $imgName.'.jpg';
$file = $folderPath . $fileName;
file_put_contents($file, $image_base64);
When I console log the data_uri and it showed a base64 encoded format. It seems that there is a problem when posting the image.