Recortar imágenes con imgAreaSelect y jQuery
Recortar imágenes con imgAreaSelect y jQuery
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


Recortar imágenes con imgAreaSelect y jQuery es muy sencillo, gracias a imgAreaSelect podemos presentar una imagen al cliente y que él mismo recorte el trozo que desee que sea subido al servidor, de esta forma podemos conseguir un mejor resultado en el resize y crop de imágenes.

Su uso es muy simple, no tenemos que instalar nada ya que podemos utilizar directamente un cdn para obtener los recursos.

Una vez lo tenemos todos preparado, sólo debemos cargar los recursos, añadir un formulario html a nuestra página y ejecutar el plugin imgAreaSelect sobre un campo de tipo imagen, con eso tendremos lo básico.

Preparando la información para el servidor

Si además queremos enviar la información que el usuario ha conseguido al servidor (algo completamente lógico), lo único que debemos hacer es utilizar el evento onSelectEnd que será ejecutado cuando el usuario haya terminado la selección, en ese momento tendremos disponibles las posiciones x1, y1, x2, y2, width y height, si queremos hacer un crop con las posición x1, y1 y el width y el height tenemos más que suficiente, a continuación tienes el código completo.

Con el código anterior tendremos todas las variables necesarias en el cliente listas para enviar al servidor y realizar las operaciones que necesitemos con la imagen, ya podemos Recortar imágenes con imgAreaSelect en el cliente de una forma tremendamente sencilla.