thumbnails cuadrados

[ZydRick]

Hola amigos, desde hace algún tiempo he estado fijándome en portales de fotos como flickr o hi5 donde el usuario sube una foto rectangular y luego se va mostrando una galería con las miniaturas exactamente cuadradas sin importar que la foto original sea rectagunlar(vertical u horizontalmente), alguno de ustedes tiene alguna idea de como realizar eso? yo tengo mi galería que crea los thumbnails a escala, pero me gustaría crear una galería con los thumbnails cuadrados. Me doy cuenta que hace una especie de corte en las fotos para obtener luego una imagen cuadrada, esa es mi duda, espero que alguno de ustedes pueda iluminarme al respecto, gracias de antemano.

Saludos

[okram]

Veamos que se puede hacer...

Modificando el código originalmente posteado en http://www.forosdelweb.com/showpost....91&postcount=6 me quedó esto:

Código PHP:

  <?php
/* 
* Código por MyOKram 
* En respuesta al tema en http://www.forosdelweb.com/showthread.php?t=516336
* Foros del Web
* 02/09/07
*/
//Si no se ha especificado el archivo
if(empty($_GET['archivo'])) {
echo 'No se especifico la ruta';
exit;
}
 
//Si no se ha especificado el tamaño del cuadrado
if(empty($_GET['pix']) or !is_numeric($_GET['pix']) or $_GET['pix'] < 1) {
echo 'No se especifico las nuevas dimensiones del thumbnail';
exit;
}
 
$archivo = $_GET['archivo'];
 
//Averiguamos la extension del archivo, porque de eso van a depender las funciones a usar
$extension = pathinfo($archivo);
$extension = $extension['extension'];
 
//Escoger la funcion. Usamos la funcion switch
switch($extension) {
case 'jpg':
$f1 = "imagecreatefromjpeg";
$f2 = "imageJpeg";
$type = "jpeg";
break;
case 'gif':
$f1 = "imagecreatefromgif";
$f2 = "imageGif";
$type = "gif";
break;
case 'png':
$f1 = "imagecreatefrompng";
$f2 = "imagePng";
$type = "png";
break;
default:
echo 'Error, tipo desconocido de archivo: '.$extension;
exit;
break;
}
 
$img_fuente = @$f1($archivo);
 
//Dimensiones
$img_ancho = imagesx($img_fuente);
$img_alto = imagesy($img_fuente);
$pix = intval($_GET['pix']);
$diferencia_ancho = $img_ancho/$pix;
$diferencia_alto = $img_alto/$pix;
 
if($diferencia_ancho < $diferencia_alto) {
$nuevo_ancho = $pix;
$prop = $nuevo_ancho/$img_ancho;
$nuevo_alto = round($img_alto*$prop);
$dist_x = 0;
$dist_y = ($pix-$nuevo_alto)/2;
} else {
$nuevo_alto = $pix;
$prop = $nuevo_alto/$img_alto;
$nuevo_ancho = round($img_ancho*$prop);
$dist_x = ($pix-$nuevo_ancho)/2;
$dist_y = 0;
}
 
$imagen = imagecreatetruecolor($pix, $pix);
imagecopyresampled($imagen, $img_fuente, $dist_x, $dist_y, 0, 0, $nuevo_ancho, $nuevo_alto, $img_ancho, $img_alto);
Header("Content-type: image/$type");
$f2($imagen);
?>   

Lo que el código hace es tomar la medida menor para hallar una proporcion, de tal manera que se obtiene un thumbnail de 100 x 100 ó más px. Luego, mediante la función imagecreatetruecolor($pix, $pix); creamos un cuadrado del tamaño que hayamos especificado.

Las variables $dist_x y $dist_y nos permitirán centrar la imagen en el cuadrado . Si no lo quieres así, cambia los valores por 0.

Aquí tienes 2 ejemplos:

EJEMPLO 1:

Original:
- http://farm2.static.flickr.com/1254/...f3a4545a_o.jpg
Redimensión (Cuadrado de 95px):
- http://myokram.coolinc.info/fdw/thum...a_o.jpg&pix=95

EJEMPLO 2:

Original:
- http://farm2.static.flickr.com/1216/...403570b9_o.jpg
Redimensión (Cuadrado de 180px):
- http://myokram.coolinc.info/fdw/thum..._o.jpg&pix=180

No publico las imágenes aquí ya que no me lo permiten (aunque no son imágenes grandes )

Espero te sirva

Un saludo,

[ZydRick]

Gracias por tu ayuda Okram, pero tengo una pequeña duda, yo tengo algunas imágenes en un directorio y las rutas guardadas en MySQL, ahora la pregunta. ¿cómo podría con ese script que has puesto, por ejemplo armar una minigalería?, porque con la galería que uso actualmente se me hace más fácil pero veo que con este script se necesita algunas cositas más, gracias nuevamente.

Saludos.

[okram]

Mira, puedes adaptar el script como lo necesites. Si tus imagenes están en una BD, pues puedes recibir por la url el id de la imagen, algo como thumb.php?id=165, luego, en el script, chequear la base de datos, sacar la ruta y ya. O puede convertir el script en una funcion que reciba como parámetros la url del archivo y el tamaño:

Código PHP:

  function thumb_sq ( $archivo , $size = 100 ) {
if(empty($archivo)) {
echo 'No se especifico la ruta';
exit;
}
 
//Si no se ha especificado el tamaño del cuadrado
$pix = (!is_numeric($size) or $size < 1) ? 100 : $size;
 
//Averiguamos la extension del archivo, porque de eso van a depender las funciones a usar
$extension = pathinfo($archivo);
$extension = $extension['extension'];
 
//Escoger la funcion. Usamos la funcion switch
switch($extension) {
case 'jpg':
$f1 = "imagecreatefromjpeg";
$f2 = "imageJpeg";
$type = "jpeg";
break;
case 'gif':
$f1 = "imagecreatefromgif";
$f2 = "imageGif";
$type = "gif";
break;
case 'png':
$f1 = "imagecreatefrompng";
$f2 = "imagePng";
$type = "png";
break;
default:
echo 'Error, tipo desconocido de archivo: '.$extension;
exit;
break;
}
 
$img_fuente = @$f1($archivo);
 
//Dimensiones
$img_ancho = imagesx($img_fuente);
$img_alto = imagesy($img_fuente);
$pix = intval($_GET['pix']);
$diferencia_ancho = $img_ancho/$pix;
$diferencia_alto = $img_alto/$pix;
 
if($diferencia_ancho < $diferencia_alto) {
$nuevo_ancho = $pix;
$prop = $nuevo_ancho/$img_ancho;
$nuevo_alto = round($img_alto*$prop);
$dist_x = 0;
$dist_y = ($pix-$nuevo_alto)/2;
} else {
$nuevo_alto = $pix;
$prop = $nuevo_alto/$img_alto;
$nuevo_ancho = round($img_ancho*$prop);
$dist_x = ($pix-$nuevo_ancho)/2;
$dist_y = 0;
}
 
$imagen = imagecreatetruecolor($pix, $pix);
imagecopyresampled($imagen, $img_fuente, $dist_x, $dist_y, 0, 0, $nuevo_ancho, $nuevo_alto, $img_ancho, $img_alto);
Header("Content-type: image/$type");
$f2($imagen);

} 
   

Bien, asi debe funcionar. Al hacer la consulta a la bd, para mostrar simplemente haces:

thumb.php

Código PHP:

  // ........
$sql = mysql_query($sql);
$img = mysql_fetch_assoc($sql);
 
thumb_sq($img['url']); 
   

Un saludo,

[okram]

Mira, puedes adaptar el script como lo necesites. Si tus imagenes están en una BD, pues puedes recibir por la url el id de la imagen, algo como thumb.php?id=165, luego, en el script, chequear la base de datos, sacar la ruta y ya. O puede convertir el script en una funcion que reciba como parámetros la url del archivo y el tamaño:

Código PHP:

  function thumb_sq ( $archivo , $size = 100 ) {
if(empty($archivo)) {
echo 'No se especifico la ruta';
exit;
}
 
//Si no se ha especificado el tamaño del cuadrado
$pix = (!is_numeric($size) or $size < 1) ? 100 : $size;
 
//Averiguamos la extension del archivo, porque de eso van a depender las funciones a usar
$extension = pathinfo($archivo);
$extension = $extension['extension'];
 
//Escoger la funcion. Usamos la funcion switch
switch($extension) {
case 'jpg':
$f1 = "imagecreatefromjpeg";
$f2 = "imageJpeg";
$type = "jpeg";
break;
case 'gif':
$f1 = "imagecreatefromgif";
$f2 = "imageGif";
$type = "gif";
break;
case 'png':
$f1 = "imagecreatefrompng";
$f2 = "imagePng";
$type = "png";
break;
default:
echo 'Error, tipo desconocido de archivo: '.$extension;
exit;
break;
}
 
$img_fuente = @$f1($archivo);
 
//Dimensiones
$img_ancho = imagesx($img_fuente);
$img_alto = imagesy($img_fuente);
$pix = intval($_GET['pix']);
$diferencia_ancho = $img_ancho/$pix;
$diferencia_alto = $img_alto/$pix;
 
if($diferencia_ancho < $diferencia_alto) {
$nuevo_ancho = $pix;
$prop = $nuevo_ancho/$img_ancho;
$nuevo_alto = round($img_alto*$prop);
$dist_x = 0;
$dist_y = ($pix-$nuevo_alto)/2;
} else {
$nuevo_alto = $pix;
$prop = $nuevo_alto/$img_alto;
$nuevo_ancho = round($img_ancho*$prop);
$dist_x = ($pix-$nuevo_ancho)/2;
$dist_y = 0;
}
 
$imagen = imagecreatetruecolor($pix, $pix);
imagecopyresampled($imagen, $img_fuente, $dist_x, $dist_y, 0, 0, $nuevo_ancho, $nuevo_alto, $img_ancho, $img_alto);
Header("Content-type: image/$type");
$f2($imagen);

} 
   

Bien, asi debe funcionar. Al hacer la consulta a la bd, para mostrar simplemente haces:

thumb.php

Código PHP:

  // ........
$sql = mysql_query($sql);
$img = mysql_fetch_assoc($sql);
 
thumb_sq($img['url']); 
   

Un saludo,

[ZydRick]

Hola de nuevo okram, una consulta, ¿cómo podría hacer para que los thumbnails sean rectangulares, por ejemplo que todos midan 150*120 pixels de ancho/alto respectivamente?, esto sin importar las dimenciones de la imagen original.

Espero haberme dejado entender, gracias de antemano .

Saludos.

[okram]

Hola ZydRick, por qué no te das una vuelta por http://www.forosdelweb.com/f18/edici...aporte-540846/?

Saludos,

[ZydRick]

Gracias, ya le estoy echando una mirada al script, por cierto, las URLs donde dices haber publicado el manual de uso del script no funcionan.

Saludos y gracias nuevamente