Cortar imágenes con jQuery + PHP

Hoy por mera curiosidad me puse a buscar formas de hacer el clásico acto de seleccionar una parte determinada de una imagen y cortarla de forma dinámica. Entre varias opciones, todas más o menos similares pero variando su complejidad, encontré jCrop, un plugin jQuery que se encarga de realizar la tarea visual del proceso de corte.

Al implementar este plugin vamos a lograr que sobre las imágenes aparezca un marcador, con el que vamos a poder seleccionar un sector determinado que nos interese, modificar su tamaño, etc. Todo esto mientras que la parte externa, la que no esta contenida dentro de la selección, se oscurezca como si se tratase del detrás de un Lightbox.

Ejemplo de como se ve la selección:

cortar foto php jquery

El plugin cuenta con varios modos de configuración posibles, me gustaron:

  • Miniatura al vuelo: Esto se logra mostrando en tiempo real el área seleccionada en forma de miniatura, algo interesante para aquellos que desean ir viendo el resultado previo corte definitivo de la imagen.
  • Animación: Utilizado para predeterminar selecciones inmediatas, ya sea para ahorrar tiempo al visitante, o bien para ejemplificar tipos y formas de cortes preferentes para nuestro sitio en particular.

jCrop puede parecer algo complicado, pero no lo es, en definitiva toda la gestión realizada por este plugin nos devuelve exactamente 2 ubicaciones de puntos y 2 medidas, las mismas corresponde a la localización de 2 puntos de selección (x1;y1) y el opuesto (x2;y2) ya con estas medidas podremos cortar la imagen desde cualquier lenguaje desde el lado del servidor, y como si fuera poco nos da también el alto y ancho de la selección.

El ejemplo esta realizado utilizando PHP, para hacer el corte solo es necesario tener instalada la biblioteca gráfica GD, el código tendría esta forma:

<?php

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);

?>

Pueden hacer pruebas, si tienen sitios en donde los usuarios suban fotos, por ejemplo para su perfil, puede ser un detalle que más de uno va a agradecer 😀

Web: jCrop

Categorizado en: