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

Podrias publicar ambos códigos para uno comparar. Muchas gracias
Esta muy bien, pero NO ES RESPONSIVE.
No se si has hecho alguna actualización al respecto.
Gracias
Ayudame no me aparece la imagen recortada, no muestra nada, porias apoyarme? ya revise todos los codigos linea por linea no se que falla