Recortar imágenes con Jquery

8 Ene

En los últimos años se ha puesto muy de moda, en aplicaciones como redes sociales, las funcionalidad que nos permite recortar una imagen, y así seleccionar la porción de la misma que debe quedar visible. Esto es muy útil por ejemplo para una foto de perfil, ya que la misma debe ocupar un tamaño específico, y tampoco se puede obligar al usuario subir una foto con una imagen con un ancho y alto específico.

Bueno, googleando un poco encontré esta librería de Jquery creada por Kelly Hallman, bastante conocida por cierto, que nos permitirá realizar esto.

Aquí les dejo el link de la página:

http://deepliquid.com/content/Jcrop_Download.html

Para descargar un ejemplo de la misma podemos hacerlo mediante el repositorio de Github:

https://github.com/tapmodo/Jcrop/tree/master/demos

Una vez descargado el archivo podemos probar un ejemplo rápido, ejecutando en nuestro navegador el archivo crop.php, dentro de la carpeta demos.

Vamos a analizar el código:

En primer lugar tendremos una imagen estática, de un gato:

<img src="demo_files/pool.jpg" id="cropbox" />

Y un formulario:

<form action="crop.php" method="post" onsubmit="return checkCoords();">
   <input type="hidden" id="x" name="x" />
   <input type="hidden" id="y" name="y" />
   <input type="hidden" id="w" name="w" />
   <input type="hidden" id="h" name="h" />
   <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
 </form>

Este formulario enviará las coordenadas:

<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />

Y el ancho y alto:

<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />

Dependiendo de la selección que haya hecho el usuario en la imagen.

La librería Jcrop, será la que nos permita agregar la funcionalidad de recorte a nuestra imagen:

<script src="../js/jquery.Jcrop.js"></script>

Esta librería nos proveerá de un método llamado justamente, Jcrop():

$(function() {
   $('#cropbox').Jcrop({
         aspectRatio: 1,
         onSelect: updateCoords
      });
   });
   function updateCoords(c)
   {
      $('#x').val(c.x);
      $('#y').val(c.y);
      $('#w').val(c.w);
      $('#h').val(c.h);
   };
   function checkCoords()
   {
      if (parseInt($('#w').val()))
         return true;
      alert('Please select a crop region then press submit.');
      return false;
 };

Observa cómo la función updateCoords() nos permite setear las coordenadas a medida que el usuario va recortando la imagen. Con respecto a la función checkCoords(), esta nos va a validar que el usuario haya recortado la imagen antes de enviarla.

Ahora desde el servidor, gracias a la biblioteca de PHP GD, podremos recortar la imagen con las coordenadas y dimensiones correctas, y devolver la misma al navegador:

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
   $targ_w = $targ_h = 150;
   $jpeg_quality = 90;
   $src = 'demo_files/pool.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);
   exit;
}

Observa que el tamaño de la imagen será siempre de 150

$targ_w = $targ_h = 150;

También podríamos guardar esa imagen recortada, seteando en la función imagejpeg(), un segundo parámetro con la ruta donde queremos guardar la imagen. Por ejemplo: podríamos mostrar la imagen recortada con la original.

Vamos a modificar:

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

Por:

$imagen_recortada = 'demo_files/_'.time().'.jpg';
imagejpeg($dst_r, $imagen_recortada, $jpeg_quality);

Y arriba de la imagen original:

<img src="demo_files/pool.jpg" id="cropbox" />

Vamos a agregar la imagen recortada, para que la muestre si es que el usuario la creó:

<?php if(isset($imagen_recortada)): ?>
<img src="<?php echo $imagen_recortada ?>" />
<br />
<?php endif; ?>

Nota: Una última cosa que hay que tener en cuenta es que la imagen que se recorta es un .jpg, por eso se usa la función: imagecreatefromjpeg(), pero en el caso de que el archivo tenga otro formato, como .gif o .png, debería verificarse y aplicarse la función indicada.

Por eso deberíamos modificar:

$src = 'demo_files/pool.jpg';
$img_r = imagecreatefromjpeg($src);

Por esto:

$src = 'demo_files/pool.jpg';
$path_info = pathinfo($src);
$extension = $path_info['extension'];
$extension = strtolower($extension);
if($extension == 'jpg' or $extension == 'jpeg'){
   $img_r = imagecreatefromjpeg($src);
}else if($extension == 'gif'){
   $img_r = imagecreatefromgif($src);
}else if($extension == 'png'){
   $img_r = imagecreatefrompng($src);
}else{
   echo 'Solo se permiten archivos, jpg, gif y png';
   exit;
}

Saludos!

Redes sociables

    11 thoughts on “Recortar imágenes con Jquery

    1. Hola muy buenas!
      Muy buen tutorial, pero no consigo hacerlo funcionar en mi web.
      Me aparece la foto pero no puedo seleccionar el recorte encima de ella.
      Al pulsar sobre el botón si me aparece el mensaje de que tengo que seleccionar una parte y presionar el botón.
      ¿Qué parte es la que me fallaría?
      He copiado todos los scripts con la ruta correctamente….no se que podrá ser.
      Muchas gracias, saludos!!

    2. muy bueno pero tengo un problema al dar seleccionar y cambiar el tamaño del cuadro de recorte, no consigo capturar la seccion de imagen que quiero, queda movido a la izquierda algo

    3. Tengo un problema;
      en el codigo que mostro la imagen, quiero poner width y height para que la imagen original no ocupe toda pagina, pero cuando lo pongo las dimensiones que quiero, no funciona el crop, recorta pero la imagen mostra en blanco, que puedo hacer ?

    4. Muchas gracias, esto es exactamente lo que necesitaba para lo que estoy haciendo.
      Solo tengo un inconveniente, si la imagen a recortar es muy grande (mas grande que el recuadro donde se muestra la imagen) como el tamaño de la imagen se autoajusta al contenedor, cuando se hace el recuadro de recorte envía las coordenadas referentes al marco, mas no a la imagen, cuando se el da crop, lo que recorta es la parte de la imagen con las coordenadas que envía del marco y por ende queda totalmente desfasado el recorte.
      Sigo trabajando en esto. Si ya has solucionado esto te agradezco la solución.

    5. me funciona bien el recorte de la imagen, solo tengo un problema cuando la imagen es muy grande y tengo que ponerle un ancho y alto a la etiqueta img para que pueda caber en la pantalla, no esta recortando la imagen segun las cordenadas que elijo

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


    *