Subir y recortar imágenes en tu sitio con PHP y jQuery

Si lo que necesitas es permitir que a tu sitio web puedan subirse imagenes PHP y jQuery y poder recortar las mismas, te traemos en esta ocasión una herramienta que te será de utilidad.

Se trata de un script que nos brinda la posibilidad de subir y cortar imágenes a nuestra web tanto en formato JPG como GIF y PNG. ¡Esperamos que les sea de utilidad!

Asegúrense de tener lo siguiente:

• PHP 4 o superior
• PHP GD Library
• jQuery versión 1.2.3 o superior
• Image Area Select - plugin por Michal Wojciechowski

Descripción General

1. Utilizaremos la variable session para retener el nombre de archivo al azar (en nuestro caso el timestamp).
Ahora también estamos almacenando la extensión del archivo que se pasa a través del script, para asegurarnos que estamos manejando el tipo de imagen correcto.

PLAIN TEXT

1. //only assign a new timestamp if the session variable is empty
2. if (strlen($_SESSION['random_key'])==0){
3. $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
4. $_SESSION['user_file_ext']= "";
5. }

NOTA: Una vez que se crea el thumbnail programamos la variable sesión para que sea igual a nada, esto luego permitirá que una nueva imagen se cargue junto con un nuevo nombre.

2. Captura, renombra y redimensiona el archivo subido.
La sección de validación se ha hecho más segura, chequeando el tipo mime como así también la extensión de la imagen.

PLAIN TEXT

1. foreach ($allowed_image_types as $mime_type => $ext) {
2. //loop through the specified image types and if they match the extension then break out
3. //everything is ok so go and check file size
4. if($file_ext==$ext && $userfile_type==$mime_type){
5. $error = "";
6. break;
7. }else{
8. $error = "Only ".$image_ext." images accepted for upload";
9. }
10. }
11. //check if the file size is above the allowed limit
12. if ($userfile_size> ($max_file*1048576)) {
13. $error.= "Images must be under ".$max_file."MB in size";
14. }

3. Obtenemos las coordinadas utilizando el plugin imgAreaSelect y mandamos los detalles al servidor:

• x1, y1 = coordinadas de la esquina superior izquierda del área de selección inicial
• x2, y2 = coordinadas de la esquina inferior derecha del área de selección inicial
• width = ancho de la selección
• height = alto de la selección

Existen un gran número de opciones con este plugin que pueden ver mediante el link de arriba. Hemos optado por un aspect ratio de 1:1 (ancho y alto de 100px) junto con una previsualización de lo que en verdad vamos a cultivar.

NOTA: Utilizando la calculación PHP de abajo hace que el script sea mucho más dinámico, sólo debes programar la altura y el ancho de tu thumbnail y el script calculará el radio/previsualización por ti.

PLAIN TEXT

1. $(window).load(function () {
2. $("#thumbnail").imgAreaSelect({ aspectRatio: "1:thumb_height/thumb_width", onSelectChange: preview });
3. });

La función de previsualización de abajo, comenzará a correr ni bien creas la selección. Esto coloca la parte derecha de la imagen dentro de la ventana de previsualización. La segunda parte de la función rellena los campos ocultos que luego se pasan al servidor.

PLAIN TEXT

1. function preview(img, selection) {
2. var scaleX = / selection.width;
3. var scaleY = / selection.height;
5. $('#thumbnail + div> img').css({
6. width: Math.round(scaleX * ) + 'px',
7. height: Math.round(scaleY * ) + 'px',
8. marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
9. marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
10. });
11. $('#x1').val(selection.x1);
12. $('#y1').val(selection.y1);
13. $('#x2').val(selection.x2);
14. $('#y2').val(selection.y2);
15. $('#w').val(selection.width);
16. $('#h').val(selection.height);
17. }

Esta función no es necesaria, pero ayuda ya que se fija si el usuario a hecho una selección de cultivo. En nuestro caso es un paso requerido. El formulario se envía si el valor existe, por ejemplo: una selección se ha hecho.

PLAIN TEXT

1. $(document).ready(function () {
2. $("#save_thumb").click(function() {
3. var x1 = $("#x1").val();
4. var y1 = $("#y1").val();
5. var x2 = $("#x2").val();
6. var y2 = $("#y2").val();
7. var w = $("#w").val();
8. var h = $("#h").val();
9. if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
10. alert("You must make a selection first");
11. return false;
12. }else{
13. return true;
14. }
15. });
16. });

4. Finalmente, es tiempo de manejar estas nuevas coordenadas y generar nuestro thumbnail cultivado.

PLAIN TEXT

1. if (isset($_POST["upload_thumbnail"])) {
2. //Get the new coordinates to crop the image.
3. $x1 = $_POST["x1"];
4. $y1 = $_POST["y1"];
5. $x2 = $_POST["x2"]; // not really required
6. $y2 = $_POST["y2"]; // not really required
7. $w = $_POST["w"];
8. $h = $_POST["h"];
9. //Scale the image to the 100px by 100px
10. $scale = $thumb_width/$w;
11. $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
12. //Reload the page again to view the thumbnail
13. header("location:".$_SERVER["PHP_SELF"]);
14. exit();
15. }

Miren el demo y descarguen una copia para ver el código completo sobre el cuál trabajamos.

Fuente: WebMotionUK