Cómo recortar imágenes usando jQuery y PHP

Cómo recortar imágenes usando jQuery y PHP. En este artículo nos centraremos en el manejo de imágenes. Es decir, recortar imagen  con una parte seleccionada. Sin embargo, podemos hacer en cualquier programa de edición existente en el mercado actual.

Por lo tanto, si nos fijamos en las principales aplicaciones en el mundo poseen módulos integrados para obtener recortes a partir de una imagen original. Si observamos los siguientes gigantes del internet que usan estos sistemas son:

• Facebook.com
• Google.com
• WordPress.com
• Twitter.com

Cómo recortar imágenes usando jQuery y PHP

Entre otras aplicaciones poseen unos sistemas capaces de hacer recortes a partir de una imagen que fue subida por el usuario. Uno de los  pilares de esos módulos es en base a los requerimientos del sistema, es decir se necesita imágenes de un solo tamaño para interactuar en diferentes tipos de resoluciones.

Todos sabemos que los usuarios pueden subir imagen mes de cualquier tamaño y este módulo se encarga de corregir esos errores al solicitar al usuario que haga un recorte.

¿Cómo funciona este sistema basado en jQuery?

En este ejemplo usaremos una imagen predeterminada que será visible al cargar la página web. Por lo tanto, si pasamos el puntero del mouse sobre la imagen, el puntero cambiara de aspecto y se convertirá en cruz «+«, en el cual nos permitirá realizar una selección que más adelante será la nueva imagen recortada.

Una vez realizado la selección deseada, todavía podemos redimensionar el área seleccionado trasladándolo a otra ubicación de la imagen y/o estirando los cuatro nodos que aparece en las esquinas.

Si vemos en el mercado, observaremos que hay infinidad de programas para lograr el mismo objetivo como es el caso de software Photoshop, entre sus herramientas de diseño tendrá la herramienta Recortar o el muy conocido Corel Draw.

JQuery realizara la selección y el recorte de la imagen.

El código jQuery controla la selección del área y también los eventos de recorte. Cuando el usuario selecciona el área de recorte, las coordenadas del área de recorte realizan el llamado al plugin Jcorp. En este script.

<script type="text/javascript">
  $(document).ready(function(){
        var size;
        $('#RecortarImagen').Jcrop({
          aspectRatio: 1,
          onSelect: function(c){
           size = {x:c.x,y:c.y,w:c.w,h:c.h};
           $("#recortar").css("visibility", "visible");     
           $("#descargar").css("visibility", "visible");     
          }
        });
     
        $("#recortar").click(function(){
            var img = $("#RecortarImagen").attr('src');
            $("#imgrecortada_img").show();
            $("#descargar").show();
            $("#imgrecortada_img").attr('src','ImagenRecortada.php?x='+size.x+'&y='+size.y+'&w='+size.w+'&h='+size.h+'&img='+img);
        });
  });
</script>

Código php para crear una capa de imagen para mostrar la nueva imagen recortada

El archivo «ImagenRecortada.php«, recibe las cotas y coordenadas de la imagen recortada. Estos datos se utilizan para crear una capa de imagen para trazar la imagen recortada en ella.

<?php
// Imagen recuerada mediante en método GET
  $img_r = imagecreatefromjpeg($_GET['img']);
  $dst_r = ImageCreateTrueColor( $_GET['w'], $_GET['h'] );
 
  imagecopyresampled($dst_r, $img_r, 0, 0, $_GET['x'], $_GET['y'], $_GET['w'], $_GET['h'], $_GET['w'],$_GET['h']);
  
  header('Content-type: image/jpeg');
  imagejpeg($dst_r);
 // Indica la salida 
  exit;
?>

Recorta imágenes usando jQuery y php – Salida en el navegador

La siguiente imagen muestra el resultado final del módulo una vez seleccionando el área y presionando el botón «recortar imagen«.

CONCLUSIÓN

Estos módulos lo usan las grandes corporaciones que ya mencionamos al inicio y si lo usan es por satisfacer alguna necesidad de los usuarios. Por lo tanto, nuestros futuros sistemas tienen que tener esta importante capacidad para trabajar con imágenes.

Agreguemos valor agregado a nuestros sistemas para dar satisfacción y agilidad a nuestros potenciales clientes.

Su uso es muy recomendado y la implementación es muy dinámica y fácil. Les dejare un vínculo para que puedan descargar este moderno sistema para sus proyectos web.

DESCARGA