Jrac es un plugin de jquery que nos permiten ampliar/reducir una imagen y seleccionar parte de su contenido.
Después mediante PHP y GD podemos redimensionar la imagen a sus nuevas dimensiones y extraer la zona seleccionada.
El primer paso es descargar Jrac desde su página de Github: Descargar
Procedemos a cargar Jquery, jquery ui y jrac mediante Javascript:
<!-- jQuery y UI--><script type="text/javascript" src="https://code.jquery.com/jquery-1.6.2.js"></script><link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" /><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<!-- jrac - jQuery Resize And Crop --><link rel="stylesheet" type="text/css" href="jrac/style.jrac.css" /><script type="text/javascript" src="jrac/jquery.jrac.js"></script>
Lo mejor es que useis el ejemplo completo que tienen en su página de GitHub:
Para procesar mediante PHP la imagen, debemos enviar 6 parámetros desde el formulario y procesarlos, los cuales son:
Crop X: Inicio del corte en la imagen (Eje X)
Crop Y: Inicio del corte en la imagen (Eje Y)
Crop Width: Tamaño del corte de la imagen (Ancho)
Crop Height: Tamaño del corte de la imagen (Alto)
Image Width: Tamaño de la imagen (Ancho redimensionado)
Image Height: Tamaño de la imagen (Alto redimensionado)
Con estos parametros podemos proceder a redimensionar la imagen mediante PHP, con el siguiente código generaríamos la nueva imagen:
function cropImage($rutaImagen, $newW, $newH, $cropW, $cropH, $cropX, $cropY) { $src = imagecreatefromjpeg($rutaImagen);
list($ancho, $alto) = getimagesize($rutaImagen);
$destino = ImageCreateTrueColor($newW, $newH); imagecopyresampled($destino, $src, 0, 0, 0, 0, $newW, $newH, $ancho, $alto); $crop = ImageCreateTrueColor($cropW, $cropH);
imagecopy($crop, $destino, 0, 0, $cropX, $cropY, $cropW, $cropH); imagedestroy($destino); return $crop;}
Ahora en la variable $crop disponemos de una imagen que podemos guardar o mostrar su salida a mediante PHP. Los parámetros de la función cropImage son legibles:
rutaImagen: Ruta de imagen a procesar
newW: Nuevo ancho de imagen, si hay redimensión)
newH: Nuevo alto (Nuevo ancho de imagen, si hay redimensión)
cropW: Ancho a cortar
cropH: Alto a cortar
cropX: Inicio de la zona de corte en eje X
cropY: Inicio de la zona de corte en eje Y
Y con esto podemos adaptar las imagenes de nuestra plataforma desde el propio navegador.
Espero que les sirva de ayuda, cualquier duda contactarme y os echo una mano.