Foros del Web » Programando para Internet » PHP »

[APORTE] Crear thumbnails cuadrados

Estas en el tema de [APORTE] Crear thumbnails cuadrados en el foro de PHP en Foros del Web. ¿Alguna vez se han preguntado como pueden hacer thumbnails cuadrados como lo hacen sitios web como Hi5? Con un poquito de logica y la gran ...
  #1 (permalink)  
Antiguo 29/08/2008, 00:47
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 15 años, 9 meses
Puntos: 416
[APORTE] Crear thumbnails cuadrados

¿Alguna vez se han preguntado como pueden hacer thumbnails cuadrados como lo hacen sitios web como Hi5?
Con un poquito de logica y la gran libreria PHP GD podemos muy facilmente.

Aqui esta una sencilla solucion:

Código PHP:
<?php

$archivo 
'imagen.jpg';
$tamano 100;
list(
$ancho$alto) = getimagesize($archivo);
if(
$ancho>$alto)
{
    
$new_alto $tamano;
    
$new_ancho = ($ancho/$alto)*$new_alto;

    
$x = ($ancho-$alto)/2;
    
$y 0;
}
else {
    
$new_ancho $tamano;
    
$new_alto = ($alto/$ancho)*$new_ancho;

    
$y = ($alto-$ancho)/2;
    
$x 0;
}

$origen imagecreatefromjpeg($archivo);
$temp imagecreatetruecolor($tamano$tamano);
imagecopyresampled($temp$origen00$x$y$new_ancho$new_alto$ancho$alto);
imagejpeg($temp"nueva_".$archivo100);
imagedestroy($temp);
imagedestroy($origen);

?>
Ahora una explicacion linea por linea (Por lo menos lo vital).

Defino una variable $tamano. Esta variable sera el tamaño de mi thumbnail cuadrado. Yo puse 100 pero puedes usar cualquier otro tamaño sin problemas.
Obtengo el ancho y el largo de la imagen con la funcion de PHP GD getimagesize.

Ahora bien, he aqui la parte crucial de el codigo.
El resize que le haremos a la imagen dependera de si la imagen es mas ANCHA que ALTA, o si es mas ALTA que ANCHA. Esto porque las coordenadas no serian las mismas si no hacemos esto.
Si la imagen es mas ANCHA que ALTA, definimos dos variables: $new_alto que sera igual a la variable $tamaño que tenemos definida un poquito mas arriba (en mi caso 100) y $new_ancho que es PROPORCIONAL al valor de el alto.
Un poquito mas abajo definimos dos variables mas: $x y $y. Donde como la imagen es mas ANCHA que ALTA $x tiene que ser la mitad de la diferencia de las dimensiones. Mientras que $y se mantendra siendo 0.

Ahora bien, si la imagen es mas ALTA que ANCHA, todo sera lo CONTRARIO de lo que planteamos anteriormente (Ya en este punto deben saber porque).

Luego de hecho todo eso, pasamos a crear la imagen $origen que sera el archivo desde donde haremos el resize hacia $temp
Creamos la imagen $temp que sera la imagen en donde copiaremos la imagen $origen pero redimensionada (Y ya que queremos crear un thumbnail cuadrado, el ancho y el alto deben ser los mismos.

Ahora proseguimos a crear el thumbnail cuadrado con la funcion de PHP GD imagecopyresampled.
Copiamos la imagen desde $temp hasta nueva_NOMBREDELAIMAGENTOMADA con una calidad de 100 (la mayor) con la funcion imagejpeg.
Y por ultimo destruimos ambas imagenes, $temp y $origen.

Este codigo es solamente para que tengan una idea, no para que copien y peguen. No se aprende nada con apretar Ctrl+C y Ctrl+V.

Nota:
No tomo en cuenta si la imagen ya es cuadrada ($ancho = $alto), pero eso ya se los dejo a ustedes para que lo editen como lo deseen y lo ajusten a sus necesidades.
Tambien asumo que la imagen a procesar es .jpg, solo agreguen un if para comprobar y realizar esta o aquella accion.
Son libres de mejorarlo y ponerle todas las "chucherias" que quieran.

FAQs de este codigo:

Q: ¿La imagen que tomamos para el codigo puede ser una imagen subida al servidor?
A: Si

Q: ¿Tu hiciste este codigo?
A: Si. Estaba aburrido y decidi hacerlo. Talvez alguien haya planteado esto en otro sitio, pero no tengo ni idea.

Q: El codigo tiene un error de sintaxis ...
A: Nope, no tiene ninguno. Si al tratar de usarlo te dio algun error de sintaxis revisa bien si te falto algo.

Q: No me gusta este codigo
A: No me interesa :)

P.D: No soy bueno con las explicaciones, pero espero que este lo suficientemente claro. Iba a crear unas cuantas imagenes para ilustrar mejor el tutorial pero ando un poquito vago :P

Cualquier duda, inquietud, sugerencia, comentario ... sean bienvenidos

Última edición por Ronruby; 02/04/2009 a las 14:01
  #2 (permalink)  
Antiguo 29/08/2008, 06:50
Avatar de luinux22  
Fecha de Ingreso: julio-2008
Mensajes: 28
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: [APORTE] Crear thumbnails cuadrados

tengo algo parecido pero no tengo resultados buenos con la calidad de los thumbs a vos te resulto..??
  #3 (permalink)  
Antiguo 29/08/2008, 08:56
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 16 años
Puntos: 2534
Respuesta: [APORTE] Crear thumbnails cuadrados

genial Ronruby, por sobre todo... el aporte matemático

con respecto a la calidad, cabe mencionar que siendo archivo tipo jpg no hay tanto problema... pues se ajusta la calidad (igual, no es perfecta) pero cuando hacemos esto con png/gif ... y sobre todo si manejan transparencias, se puede volver un desastre....

la librería GD es genial, cierto... igual, hay otras... pero yo me quedo con la simpleza de GD, suerte!
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #4 (permalink)  
Antiguo 29/08/2008, 10:11
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 15 años, 9 meses
Puntos: 416
Respuesta: [APORTE] Crear thumbnails cuadrados

Cita:
Iniciado por luinux22 Ver Mensaje
tengo algo parecido pero no tengo resultados buenos con la calidad de los thumbs a vos te resulto..??
Lo he probado con cantidad de imagenes y el resultado es muy bueno.

Hasta compare con imagenes de Hi5, y se ve exactamente igual.
  #5 (permalink)  
Antiguo 30/08/2008, 00:19
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 15 años, 9 meses
Puntos: 416
Respuesta: [APORTE] Crear thumbnails cuadrados

He añadido un video, lo pueden ver en la siguiente direccion:
Direccion removida. Tengo que arreglar unas cuantas cosas de el video.
Perdonen los ruidos y eso. Tambien hay partes en donde no se oye nada ...
Es que se me hacia un poco incomodo sostener la camara, escribir y hablar al mismo tiempo.

Talvez la explicacion no sea todavia del todo clara, pero les resolvera algunas dudas a muchos.

Última edición por Ronruby; 30/08/2008 a las 00:46
  #6 (permalink)  
Antiguo 30/08/2008, 00:36
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 16 años
Puntos: 2534
Respuesta: [APORTE] Crear thumbnails cuadrados

Cita:
Es que se me hacia un poco incomodo sostener la cámara, escribir y hablar al mismo tiempo.
hola! ... pues usa un tripie... (broma)

o sabes, porque no usas un programa de captura de video... hay gratuitos... yo uso uno, se llama... CamStudio simple y libre... muy simple, por cierto....

http://camstudio.es/

y luego, solo le editas el sonido con mas calma.... con Audacity (por ejemplo)

http://audacity.sourceforge.net/

por cierto.... genial por la iniciativa, suerte!!
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #7 (permalink)  
Antiguo 30/08/2008, 00:38
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 15 años, 9 meses
Puntos: 416
Respuesta: [APORTE] Crear thumbnails cuadrados

:P Era mas facil explicarlo en papel. Y gracias por el programa, hace tiempo que andaba buscando uno.
  #8 (permalink)  
Antiguo 30/08/2008, 08:41
Avatar de Carlojas  
Fecha de Ingreso: junio-2007
Ubicación: Shikasta
Mensajes: 1.272
Antigüedad: 16 años, 10 meses
Puntos: 49
Respuesta: [APORTE] Crear thumbnails cuadrados

Buen aporte Ronruby



Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 01:40.