Cómo crear dinámicamente miniaturas

En el screencast de esta semana, te mostraré cómo cargar archivos y luego hacer que PHP cree una miniatura. Ya sea que esté creando un sitio de comercio electrónico, o simplemente una galería simple, estas técnicas resultarán absolutamente útiles. Si estás listo para el "screencast" de la semana, vámonos.!

* Nota: ha habido algunos cambios leves en el código después de algunas reflexiones adicionales y algunas sugerencias excelentes. No te preocupes, muy poco ha cambiado. Sólo un poco de limpieza. Puede revisar los cambios a continuación y / o descargar el código fuente.

El archivo de configuración simple

El primer paso es crear un archivo de configuración simple donde podamos almacenar algunas variables. Al colocar estos en su propio archivo, podemos realizar cambios en nuestro código fácilmente sin tener que editar muchas líneas.

 $ final_width_of_image = 100; $ path_to_image_directory = 'images / fullsized /'; $ path_to_thumbs_directory = 'images / thumbs /';

$ final_width_of_image - Esta variable almacenará el ancho de nuestra miniatura..
$ path_to_image_directory - Esto almacena el camino a nuestra carpeta de imágenes de tamaño completo
$ path_to_thumbs_directory - Esto almacena la ruta a nuestro directorio completo de miniaturas

Guarde este archivo como 'config.php' y colóquelo en la raíz de su carpeta.

El HTML

A continuación, cree una nueva página llamada "index.php" y pegue lo siguiente.

       Miniaturas dinámicas   Subir un archivo, hombre!

Primero, desplácese hacia abajo un poco hasta la etiqueta del cuerpo. Para mantener las cosas tan simples como sea posible, he creado una forma extremadamente simple. Pero hará el trabajo bien.

Cada vez que vaya a trabajar con el tipo de entrada "subir archivo", debe agregar un atributo "enctype" a la etiqueta de formulario.

   En lugar de publicar en una página diferente, simplemente escribiremos el código en nuestro documento principal. Para hacer eso, estableceremos el atributo de acción igual a esta página..
  acción = " Ahora, desplácese hasta el código PHP en la parte superior. Estamos requiriendo dos archivos. El primero es el archivo de configuración que acabamos de crear. El segundo es "functions.php" - que crearemos en breve.
  A continuación, estamos comprobando si la página ha publicado de nuevo. Si es así, verificaremos si el archivo que el usuario eligió fue "jpg", "gif" o "png". Podemos hacer esto comparando el nombre del archivo con una expresión regular.
  if (preg_match ('/ [.] (jpg) | (gif) | (png) $ /', $ _FILES ['fupload'] ['name']))
  Para aprender más sobre expresiones regulares, mira este screencast.
  Avanzando, estamos creando algunas variables..
   $ nombre de archivo - Almacena el nombre del archivo que el usuario ha elegido para subir..
  $ fuente - Cuando se hace clic en el botón Enviar, el archivo se guardará en un directorio temporal. Esta variable almacenará esa ruta..
  $ target - Esto almacenará la ruta donde se debe guardar la imagen cargada..
 
 Guardando el archivo
  El último paso es mover el archivo del directorio temporal a nuestra carpeta "images / fullsized". Podemos hacer esto llamando al Función Move_uploaded_file (). Pasaremos en dos parámetros. El primero debe conocer la ruta a la carpeta temporal. El segundo necesita saber dónde guardar el archivo. ($ source y $ target, respectivamente)
  move_uploaded_file ($ source, $ target);
 Creando la miniatura
  En lugar de almacenar todo el código en nuestra página index.php, creemos otra página llamada "functions.php". Crea y abre este nuevo archivo y escribe una nueva función llamada "createThumbnail ()".
  function createThumbnail ($ filename) requiere 'config.php'; if (preg_match ('/ [.] (jpg) $ /', $ filename)) $ im = imagecreatefromjpeg ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (gif) $ /', $ filename)) $ im = imagecreatefromgif ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (png) $ /', $ filename)) $ im = imagecreatefrompng ($ path_to_image_directory. $ filename);  $ ox = imagesx ($ im); $ oy = imagesy ($ im); $ nx = $ final_width_of_image; $ ny = piso ($ oy * ($ final_width_of_image / $ ox)); $ nm = imagecreatetruecolor ($ nx, $ ny); imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy); if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("Hubo un problema. ¡Por favor, inténtalo de nuevo!");  imagejpeg ($ nm, $ path_to_thumbs_directory. $ filename); $ tn = ''; $ tn. = '
Felicidades. Su archivo se ha subido con éxito y se ha creado una miniatura. '; echo $ tn; 
  Comenzaremos requiriendo el archivo "config.php" una vez más. A continuación, verificaremos si el usuario seleccionó un "jpg", "gif" o "png". Debemos hacer esto porque PHP requiere una función diferente dependiendo del archivo: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".
     Después de eso, debemos almacenar los valores de ancho y alto de la imagen que el usuario eligió cargar. Podemos hacer esto llamando a "imagesx" e "imagesy", respectivamente.
  $ ox = imagesx ($ im); $ oy = imagesy ($ im);
  A continuación, crearemos dos variables más que almacenarán los valores de ancho y alto para la miniatura que pronto se creará.
   $ nx - es igual al valor de nuestro archivo de configuración: 100
  $ ny. Tendremos que ejecutar algunos cálculos matemáticos simples para encontrar la corrección proporcional a la altura.
 
  $ nx = $ final_width_of_image; $ ny = piso ($ oy * ($ final_width_of_image / $ ox));
 ImageCreateTrueColor
     En nuestro caso, estamos pasando las variables "$ nx" y "$ ny" que acabamos de crear..
 Copia de imagen redimensionada
     imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy);
 Guardando la miniatura
  Los pasos finales requieren que verifiquemos si existe una carpeta de "miniaturas". Si no lo hace, lo crearemos usando "mkdir". Luego, enviaremos nuestra nueva imagen a la carpeta de miniaturas.
  if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("Hubo un problema. ¡Inténtalo de nuevo!"); 
     Finalmente, debemos hacer un eco de la miniatura para mostrar al usuario que su imagen se cargó correctamente..
  $ tn = ''; $ tn. = '
Felicidades. Su archivo se ha subido con éxito y se ha creado una miniatura. '; echo $ tn;
 Terminado
  ¡Bien hecho! Este screencast se hizo de forma apresurada, debido a limitaciones de tiempo. Es posible que desee limpiar el código un poco y un poco más el manejo de errores.
  ¡Si desea ir más lejos, vea si puede descubrir cómo recortar las imágenes también! Como siempre, estoy más que abierto a refinamientos y sugerencias.!
  Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios..
 
  
 



		
			
	   
	




Código