我正在创建一个注册系统，其中将根据用户的输入创建一个文件夹，并将该人的图像放入该文件夹中。文件夹已创建，但图像只是一个空的 jpg 文件。
注册.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>
$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);
最佳答案
我认为你传递的是一个空的 $_POST['image'];
因为当调用 take_snapshot() 时，您将 base64 编码值的值传递给错误的元素。
function take_snapshot() {
Webcam.snap( function(data_uri) {
$("input[name='image']").val(data_uri); // Do this change
document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
console.log(data_uri);
} );
}
关于javascript - 通过注册表单提交时，图像未存储在 php 中的服务器上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66962137/