Portada » JQuery biblioteca de JavaScript » Cómo recortar imágenes usando jQuery y PHP

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.

Ver Demo

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

Recortar imágenes con jQuery y PHP
Recortar imágenes con jQuery y PHP

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.

Cómo recortar imágenes usando jQuery y PHP
Cómo recortar imágenes usando jQuery y PHP

DESCARGA

Ver Demo Descargar Ahora!

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

3 comentarios en “Cómo recortar imágenes usando jQuery y PHP”

  1. Ayudame no me aparece la imagen recortada, no muestra nada, porias apoyarme? ya revise todos los codigos linea por linea no se que falla

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad