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.

Explicación

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.

Preparando interfaz para recortar

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:

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.

Enviar foto recortada a PHP

Una vez que el usuario haga clic en el botón, se va a obtener el canvas y se subirá a PHP.

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.

Recibir imagen recortada en PHP

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.

Poniendo todo junto

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.