Recortar imagen con JavaScript - Descargar foto cortada

Recortar imagen con JavaScript

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:

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í:

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í:

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
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:

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
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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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.

Dejar un comentario