Hoy te mostraré cómo cortar o recortar una imagen con JavaScript. Es decir, darle al usuario la posibilidad de recortar una imagen seleccionando una porción de la misma.
Una vez que la foto haya sido recortada con JS podemos descargarla, colocarla en un canvas, en una imagen o subirla a un servidor que ejecute PHP, Node.js, Python, etcétera.
En resumen te voy a enseñar cómo hacer que el usuario recorte una foto usando JS.
Sobre la librería
Vamos a usar Cropper.js, descrita como “Recortador de imágenes JavaScript” según la traducción literal de la descripción que le da el autor. Esta librería funciona perfectamente y tiene varias opciones.
Importando librería
Debemos contar con el JavaScript y el CSS de la misma. Para ello puedes usar cdnjs y descargar las versiones .min.css y .min.js desde aquí: https://cdnjs.com/libraries/cropperjs
Por otro lado el autor indica que debemos agregar los siguientes estilos en caso de usar una imagen como contenedor:
/* Ensure the size of the image fit the container perfectly */
img {
display: block;
/* This rule is very important, please don't ignore this */
max-width: 100%;
}
Plantilla HTML
Ya vimos lo que debemos cargar (estilos CSS y librería de JavaScript para recortar la imagen). Ahora veamos cómo usar el cropper.
La librería requiere un elemento para montarse sobre el mismo. En mi caso voy a usar una imagen, es decir, un elemento img y también colocaré un botón que va a permitir descargar la imagen recortada.
Entonces el HTML queda así:
<!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="descargar">Descargar imagen recortada</button>
<br>
<a href="https://parzibyte.me/blog">By Parzibyte</a>
<br>
<img src="video-game-2234745_1920.jpg" id="imagen">
</div>
</body>
</html>Fíjate en que estoy cargando la librería en el head, y que dentro del body estoy definiendo la imagen con el id imagen, y el botón que descarga la imagen recortada con el id descargar.
Recortar imagen con JavaScript
Ya tenemos nuestro elemento en donde vamos a colocar el cropper. Entonces en JavaScript lo iniciamos así:
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
});Así de simple. Primero definimos el elemento del DOM en la línea 1 con querySelector, después creamos una nueva instancia de Cropper pasándole dos cosas: el elemento y un objeto con opciones.
Al visitar la página en el navegador ya podremos ver que la imagen aparece con un rectángulo de selección para cortar una porción de la imagen:
La librería ofrece listeners para saber cuando el usuario ha terminado de cortar y para otros eventos. Aquí solo te mostraré cómo obtener el canvas de la selección de la imagen, esto es, el recorte que el usuario ha hecho.
Una vez que tenemos el canvas cortado podemos hacer cualquier cosa con él:
- Descargarlo como imagen JPG o PNG
- Enviarlo a un servidor con PHP, JavaScript, Go, etcétera
- Colocarlo en otro canvas
- Colocarlo en otra imagen
- Cualquier otra cosa que se te ocurra y que sea posible
Descargar imagen recortada
Yo te voy a enseñar a descargarlo. Recuerda que definimos a la instancia de Cropper de manera global anteriormente
Así que en el clic del botón vamos a usarlo e invocar a getCroppedCanvas (obtener canvas recortado), luego convertiremos ese canvas a base64 como imagen y lo vamos a descargar:
$btnDescargar.onclick = () => {
if (!cropper) {
return;
}
// Obtener el canvas recortado
const canvas = cropper.getCroppedCanvas();
// Aquí ya podemos hacer cualquier cosa con el canvas
let enlace = document.createElement('a');
// Nombre de la imagen que se descarga
enlace.download = "imagen_recortada." + EXTENSION_IMAGEN_DESCARGADA;
enlace.href = canvas.toDataURL(MIME_TYPE_IMAGEN_DESCARGADA, CALIDAD_JPG);
enlace.click();
};Por si no entiendes bien lo que estamos haciendo te recomiendo leer el post de cómo descargar un canvas.
Poniendo todo junto
El código completo te lo dejo en GitHub, ahí puedes ver todo lo utilizado en el tutorial. Por cierto, también te he preparado una demostración en línea.
Yo utilicé esta librería en una aplicación para recortar fotos con opción para seleccionar la imagen desde el disco duro, recortarla con una relación de aspecto definida y dar la opción de descargar o de generar un PDF (con fotos tamaño infantil) con PHP.
Si el tutorial te gustó te invito a ver más software que he creado o aprender más sobre JavaScript.
