捕获WEBCAM，选择照片，编辑和保存-PHP-JCROP

Question

朋友怎么样？我希望你能帮助我。我必须制作一个可捕获摄像头图像的网络，拍摄照片，将其剪切并将其存储在我指定的unc位置。

为此，我做了一些发明，发现了一个有趣的代码，可以捕获并保存照片，但是当我想借助jquery.Jcrop插件进行剪切时。仅将图像保存为黑色。在这里，我放置了我正在使用的代码。希望您能帮助我，谢谢。

/*
    Tomar una fotografía y guardarla en un archivo
    @date 2017-11-22
    @author parzibyte
    @web parzibyte.me/blog
*/
function tieneSoporteUserMedia() {
    return !!(navigator.getUserMedia || (navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia) || navigator.webkitGetUserMedia || navigator.msGetUserMedia)
}
function _getUserMedia() {
    return (navigator.getUserMedia || (navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia) || navigator.webkitGetUserMedia || navigator.msGetUserMedia).apply(navigator, arguments);
}

// Declaramos elementos del DOM
var $video = document.getElementById("video"),
	$canvas = document.getElementById("canvas"),
	$boton = document.getElementById("boton"),
	$estado = document.getElementById("estado");
	$imgusu = document.getElementById("imgusu");

	$nombres = document.getElementById("nombres");
	$apellidos = document.getElementById("apellidos");
	$dni = document.getElementById("dni");
	$correo = document.getElementById("correo");

	$x = document.getElementById("x");
	$y = document.getElementById("y");
	$w = document.getElementById("w");
	$h = document.getElementById("h");

if (tieneSoporteUserMedia()) {
    _getUserMedia(
        {video: true},
        function (stream) {
            console.log("Permiso concedido");
			$video.src = window.URL.createObjectURL(stream);
			$video.play();

			//Escuchar el click
			$boton.addEventListener("click", function(){

				//Pausar reproducción
				$video.pause();

				//Obtener contexto del canvas y dibujar sobre él
				var contexto = $canvas.getContext("2d");
				$canvas.width = $video.videoWidth;
				$canvas.height = $video.videoHeight;
				contexto.drawImage($video, 0, 0, $canvas.width, $canvas.height);
				
				nombres = document.getElementById("nombres").value;
				apellidos = document.getElementById("apellidos").value;
				dni = document.getElementById("dni").value;
				correo = document.getElementById("correo").value;

				x = document.getElementById("x").value;
				y = document.getElementById("y").value;
				w = document.getElementById("w").value;
				h = document.getElementById("h").value;

				var foto = $canvas.toDataURL(); //Esta es la foto, en base 64
				$estado.innerHTML = "<b>Enviando foto. Por favor, espera...</b>";

				var xhr = new XMLHttpRequest();
				xhr.open("POST", "./guardar_foto.php?nombres="+nombres+"&apellidos="+apellidos+"&dni="+dni+"&correo="+correo+"&x="+x+"&y="+y+"&w="+w+"&h="+h, true);
				xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xhr.send(encodeURIComponent(foto)); //Codificar y enviar

				xhr.onreadystatechange = function() {
				    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
				        console.log("<b>La foto fue enviada correctamente</b>");
				        console.log(xhr);
				        $estado.innerHTML = "<h1>Foto guardada con éxito.</h1>";
				        $imgusu.innerHTML = "<img src='images/"+dni+".jpg'>";
				    }
				}

				//Reanudar reproducción
				$video.play();
			});
        }, function (error) {
            console.log("Permiso denegado o error: ", error);
            $estado.innerHTML = "No se puede acceder a la cámara, o no diste permiso.";
        });
} else {
    alert("Lo siento. Tu navegador no soporta esta característica");
    $estado.innerHTML = "Parece que tu navegador no soporta esta característica. Intenta actualizarlo.";
}

<?php

$nombres = $_GET['nombres'];
$apellidos = $_GET['apellidos'];
$dni = $_GET['dni'];
$correo = $_GET['correo'];

$x = $_GET['x'];
$y = $_GET['y'];
$w = $_GET['w'];
$h = $_GET['h'];

$imagenCodificada = file_get_contents("php://input"); //Obtener la imagen
if(strlen($imagenCodificada) <= 0) exit("No se recibió ninguna imagen");
//La imagen traerá al inicio data:image/png;base64, cosa que debemos remover
$imagenCodificadaLimpia = str_replace("data:image/png;base64,", "", urldecode($imagenCodificada));

//Venía en base64 pero sólo la codificamos así para que viajara por la red, ahora la decodificamos y
//todo el contenido lo guardamos en un archivo
$imagenDecodificada = base64_decode($imagenCodificadaLimpia);

//Calcular un nombre único
//$nombreImagenGuardada = "foto_" . uniqid() . ".png";
$nombreImagenGuardada = "images/".$dni.".jpg";

//Escribir el archivo
file_put_contents($nombreImagenGuardada, $imagenDecodificada);

//INI-Si quito esta seccion si guarda la foto, pero entera sin recortarla

		$targ_w = $targ_h = 320;
		$jpeg_quality = 100;

		//$src = 'images/'.$dni'.jpg';
		$img_r = imagecreatefromjpeg($nombreImagenGuardada);
		$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

		imagecopyresampled($dst_r,$img_r,0,0,$x,$y,
		$targ_w,$targ_h,$w,$h);

		//header('Content-type: image/jpeg');
		imagejpeg($dst_r,$nombreImagenGuardada,$jpeg_quality);
	  	//header('Location: index.php');
//FIN-
	  
//Terminar y regresar el nombre de la foto
exit($nombreImagenGuardada);

?>

<!DOCTYPE html>
<html lang="es">
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>.:: Registrar Carnet ::.</title>

	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.Jcrop.js"></script>
	<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

	<script type="text/javascript">

	  $(function(){

	    $('#cropbox').Jcrop({
	      aspectRatio: 1,
	      onSelect: updateCoords
	    });

	  });

	  function updateCoords(c)
	  {
	    $('#x').val(c.x);
	    $('#y').val(c.y);
	    $('#w').val(c.w);
	    $('#h').val(c.h);
	  };

	  function checkCoords()
	  {
	    if (parseInt($('#w').val())) return true;
	    alert('Please select a crop region then press submit.');
	    return false;
	  };

	</script>

</head>
<body>

<table border="1">
	<tr>
		<td>
			Nombres:<br>
			<input type="text" id="nombres" name="nombres" value=""><br>
			Apellidos:<br>
			<input type="text" id="apellidos" name="apellidos" value=""><br>
			DNI:<br>
			<input type="text" id="dni" name="dni" value="1"><br>
			Correo:<br>
			<input type="text" id="correo" name="correo" value=""><br>
			<br>
		</td>	
		<td>
			<div id="cropbox"><video id="video" width="320" height="240"></video></div>
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="w" />
			<input type="hidden" id="h" name="h" />	
			<br>
			<button id="boton">Tomar Foto</button>
		</td>
		<td>
			<div id="imgusu"></div>
		</td>
	</tr>
</table>
<p id="estado"></p>
<canvas id="canvas" style="display: none;"></canvas>

</body>
<script src="script.js"></script>
</html>