Cortar imágenes con jCrop y PHP. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet PHP

¡votar!

Cortar imágenes con jCrop y PHP

jCrop es un plugin para jQuery que nos permite realizar la acción de seleccionar parte de una imagen para luego poder utilizar la opción de cortar ese trozo, aunque el plugin sólo nos deja hacer el marcado, y el cortar habría que hacerlo utilizando otro lenguaje de script, como puede ser PHP.

Cuando implementamos este plugin, logramos que sobre la imagen aparezca un marcador, pemitiéndonos seleccionar el área de la imagen que necesitemos, mientras que la parte externa a la seleccionada se oscurece.

jCrop nos devuelve dos puntos de ubicación y dos medidas, las cuales corresponden a la localización de 2 puntos de selección (x1:y1) y a su opuesto (x2:y2). Con estos datos y utilizando un lenguaje de programación web, podemos hacer el corte del área seleccionada.

El uso del plugin es muy sencillo. Lo primero es incluir en el proyecto la librería jQuery y jCrop.

La llamada más sencilla es la siguiente:

$(function(){ $('#jcrop_target').Jcrop(); });

Esto nos permitirá seleccionar un área de la imagen. Pero el plugin nos permite crear elementos más complejos, como es el mostrar los datos de las coordenadas. Para poder hacer esto, el código sería el siguiente:

$(function(){
$('#jcrop_target').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
});

Para más información, pueden visitar su página web oficial.

Para realizar el corte de la imagen seleccionada, como hemos dicho anteriormente, es necesario utilizar algún lenguaje de programación como puede ser PHP. En este caso, lo podemos hacer de forma sencilla utilizando la librería gráfica GD

$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$src = 'demo_files/flowers.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);

Vía: Kabytes