jquery — Захват WEBCAM, выбор фотографии, редактирование и сохранение — PHP-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>