Recortar imagen con PHP y Cropper JS
Hoy voy a enseñarte a recortar una foto con PHP dando al usuario la posibilidad de recortar una foto y luego guardarla en el servidor con PHP.
De este modo vamos a darle al usuario la opción de recortar una imagen y guardar el resultado en PHP. Luego ya puedes ligar esa foto o imagen a una base de datos, alojarla en el servidor, usarla para crear otra imagen, etcétera.
Usaremos Cropper.js en el lado del cliente y después enviaremos el resultado a PHP. Con esto vamos a ahorrar recursos pues el recorte de la foto se hará del lado del cliente pero al final prácticamente vamos a recortar la foto con PHP.
Básicamente vamos a usar dos cosas que ya he expuesto en mi blog. La primera es cómo recortar una foto con JS, pero en este caso no vamos a descargarla, sino enviarla al servidor como expliqué en mi post de enviar un canvas a PHP.
Nota: recuerda que la imagen puede venir de cualquier lugar. Yo usaré una imagen estática por simplicidad.
Primero veamos el código HTML en donde mostramos la imagen a recortar e iniciamos la librería de Cropper.js. También ahí estamos importando la librería y todo eso:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recortar imagen con JavaScript - By Parzibyte</title>
<script src="js/cropper.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/cropper.min.css">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<div style="text-align: center;">
<h1>Recortar imagen con JavaScript</h1>
<br>
<button id="subir">Subir recorte a PHP</button>
<br>
<a href="https://parzibyte.me/blog">By Parzibyte</a>
<br>
<img src="video-game-2234745_1920.jpg" id="imagen">
</div>
</body>
</html>Presta atención a dos elementos. El primero es el botón con el id subir, que va a enviar la imagen recortada al servidor con PHP.
El segundo elemento es la imagen con el id imagen, el src de esta imagen es la que vamos a poner para que se recorte.
Una vez que el usuario haga clic en el botón, se va a obtener el canvas y se subirá a PHP.
document.addEventListener("DOMContentLoaded", () => {
const $btnSubir = document.querySelector("#subir");
const $imagen = document.querySelector("#imagen");
let cropper = new Cropper($imagen, {
responsive: false, // <-- Si no se pone en false, la imagen se mueve cuando cambia el tamaño de la ventana
});
$btnSubir.onclick = async () => {
if (!cropper) {
return;
}
// Obtener el canvas recortado
const canvas = cropper.getCroppedCanvas();
// Convertir la imagen a Base64 y ponerlo en el enlace
const data = canvas.toDataURL("image/png");
const fd = new FormData();
fd.append("imagen", data); // Se llama "imagen", en PHP lo recuperamos con $_POST["imagen"]
const respuestaHttp = await fetch("imagen.php", {
method: "POST",
body: fd,
});
const nombreImagenSubida = await respuestaHttp.json();
console.log("La imagen ha sido enviada y tiene el nombre de: " + nombreImagenSubida);
};
});Primero obtenemos el lienzo recortado con getCroppedCanvas, luego lo convertimos a imagen como base64 y lo enviamos a nuestro servidor PHP usando fetch.
El servidor nos responderá con el nombre de la imagen que acabamos de subir. Esto no es obligatorio, solo es para mostrar que podemos manejar la respuesta de PHP.
Fíjate en que enviamos la imagen con FormData y que vamos a recuperarla en PHP accediendo a $_POST en PHP con la clave imagen.
Finalmente veamos el código para recibir la imagen en PHP. Recuerda que vamos a recibir la imagen en base64 así que debemos decodificarla, calcular un nombre único y escribir el contenido en un archivo.
<?php
$imagenCodificada = $_POST["imagen"];
$imagenCodificadaLimpia = str_replace("data:image/png;base64,", "", $imagenCodificada);
$imagenDecodificada = base64_decode($imagenCodificadaLimpia);
$nombreImagenGuardada = "imagen_" . uniqid() . ".png";
file_put_contents($nombreImagenGuardada, $imagenDecodificada);
echo json_encode($nombreImagenGuardada);
El código completo del lado del cliente y servidor te lo dejo en mi GitHub. Y así es como podemos dejar que el usuario recorte una foto con PHP y después procesarla para cualquiera de nuestras necesidades.
En mi blog tengo más entradas sobre PHP y JavaScript.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.
Ver comentarios
Hola, vi tu articulo y me sorprende la simplicidad con la que lo creaste, no soy programador ni mucho menos, pero me gusta este mundo, actualmente me gustaria comenzar con Kotlin para hacer algun app (sencilla), muchos saludos tus articulos son muy interesantes
Hola. Gracias por sus comentarios.
Saludos y éxito
Gracias por tu iniciativa, excelente aporte a los que te seguimos
Gracias por sus comentarios. Saludos y éxito!