Recortar imagen con JavaScript

Recortar imagen con JavaScript - Descargar foto cortada

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:

Recortar imagen con JavaScript – Seleccionar porción rectangular

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

Recortar imagen con JavaScript – Descargar foto cortada. El resultado está a la derecha

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/