Micaela 6 de noviembre de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

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


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

  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.

  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 <strong>".$image_ext."</strong> 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.

  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.

  1. function preview(img, selection) {
  2.     var scaleX =  / selection.width;
  3.     var scaleY =  / selection.height;
  4.  
  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.

  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.

  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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (8)

  1. marine dice:

    excelente! funciona de maravillas

  2. jose luis dice:

    Muy bueno y util. gracias

  3. Ricardo dice:

    Genial, buenísimo. ¿Cómo se podría implementar en un sistema con base de datos?

  4. Gabriel Gonzalez dice:

    genial men, exelente explicacion
    me sacastes de un apuro hermano
    Muchas gracias!!!

  5. Elizabeth dice:

    como puedo guardarlo en una base de datos, es decir tener un campo de nombre imagen y se guarde como imagen.jpg ??

  6. Esteban dice:

    Muchas gracias!!! Lo que andaba buscando

  7. Jonathan Giovanni Mendoza Amado dice:

    disculpa necesito ayuda con un ejercicio sobre editar una imagen, siempre es la misma imagen solo que en ocasiones necesito editarla como montarle texto o seleccionar ciertos puntos especificos de la imagen ,estoy desarrollando en php y quiero ver la posibilidad de ayuda o algun tutorail de como realizarlo de antemano gracias espero tu respuesta

  8. baezadrez dice:

    Hola consulto se pueden modificar para que funcione el resize desde un smartphone?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder