Estoy intentando hacer un thumbnail
básico de imágenes que cargan desde la base de datos en tamaño grande pero en algunas zonas de la web cargan a un tamaño específico mucho más pequeño (por ejemplo a 70x70).
He hecho varias pruebas de varias maneras y por ahora solo he conseguido o guardarlas a dicho tamaño en una carpeta o bien mostrarlas en el navegador con su header
, sin embargo la idea es mostrarla desde su <img src="">
correspondiente.
En este archivo de ejemplo thumbnail-crop-final.php
<?php
$nombre = "budismo.jpg";
$img = imagecreatefromjpeg("img/$nombre");
$imgs = getimagesize("img/$nombre");
$w = $imgs[0];
$h = $imgs[1];
$escala_w = 70/$w;
$escala_h = 70/$h;
$nuevo_ancho = floor($w*$escala_w);
$nuevo_alto = floor($h*$escala_h);
$tp = imagecreatetruecolor($nuevo_ancho, $nuevo_alto);
imagecopyresampled($tp, $img, 0,0,0,0, 70, 70, $w, $h);
//Opción para guardarla directamente en una carpeta
imagejpeg($tp, "miniaturas/$nombre", 100);
//Con esta opción logro verla en pantalla con el nuevo tamaño 70x70
Header("Content-type: image/jpeg");
imagejpeg($tp, NULL, 100);
//imagejpeg($img);
imagedestroy($img);
?>
¿Cómo puedo añadir dicho ejemplo al html
?
He intentado varias maneras y de varios ejemplos incluyendo recibiendo parámetros desde la url
, o llamando a ese archivo creado desde el mismo html
, o incluso con base64
etc etc y no he sido capaz.
¿Qué puedo añadir para mostrarla desde html
desde src
?
La idea es redimensionar esas imágenes cargadas en las variables desde la base de datos, ejemplo $nombre
y que luego se redimensionen a 70x70 y las pueda mostrar o cargar desde su html
y no como las muestra con Header("Content-type: image/jpeg");
que las deja en medio con un fondo negro.
Edición
Por ahora he intentado estas dos maneras:
1 - Llamando al archivo donde se hace la redimensión nueva de la imagen al nuevo tamaño y la cargo en el archivo a mostrar.
redimensionador.php
<?php
//Redimensionador
//Opción 1 para cargar desde otro archivo.
/*$nombre = "budismo_0011.jpg";
$img = imagecreatefromjpeg("img/$nombre");
$imgs = getimagesize("img/$nombre");*/
$nombre_archivo = "ajo_tradiciones.jpg";
$rutaCarpetas = "views/images/$nombre_archivo";
//$img = imagecreatefromjpeg("img/$nombre");
//$imgs = getimagesize("img/$nombre");
$img = imagecreatefromjpeg($rutaCarpetas);
$imgs = getimagesize($rutaCarpetas);
$w = $imgs[0];
$h = $imgs[1];
$escala_w = 70/$w;
$escala_h = 70/$h;
$nuevo_ancho = floor($w*$escala_w);
$nuevo_alto = floor($h*$escala_h);
$tp = imagecreatetruecolor($nuevo_ancho, $nuevo_alto);
imagecopyresampled($tp, $img, 0,0,0,0, 70, 70, $w, $h);
//Opción para guardarla directamente en una carpeta
//imagejpeg($tp, "miniaturas/$nombre", 100);
//Con esta opción logro verla en pantalla con el nuevo tamaño 70x70
Header("Content-type: image/jpeg");
imagejpeg($tp, NULL, 100);
//imagejpeg($img);
imagedestroy($img);
?>
crop-cargador.php
<p>Opción redimensionada desde archivo externo</p>
<img src="redimensionador.php" />
<p>Opción redimensionada desde archivo externo desde la ruta de carpetas</p>
<img src="views/modules/redimensionador.php" />
<p>Prueba para ver si la ruta de imágenes es correcta en el servidor online.</p>
<?php
$nombre_archivo = "ajo_tradiciones.jpg";
$rutaCarpetas = "views/images/$nombre_archivo";
//Compruebo la ruta del archivo a cargar;
//echo include "views/modules/redimensionador.php";
//echo include "redimensionador.php";
?>
<img src="<?php echo $rutaCarpetas; ?>">
Esta prueba me sale bien en localhost, sin embargo al subirlo al servidor online no funciona. ¿A que se debe? ¿tengo que hacer otro cambio?
2 - Intento hacerlo con base64, y me sale bien solo que aun no sé como debería aplicarle los nuevos tamaños tal y como hice con redimensionador.
crop-base64.php
<?php
//Base64
//$bytesCodificados = base64_encode(file_get_contents("/ruta/hasta/la/imagen.png"))
//En la ruta Raiz
//$file = '139800541042.437';//FotoTarot_005.jpg
//$fileJpg = 'FotoTarot_005.jpg';//
//En la ruta relativa con carpetas
$file = 'views/images/139800541042.437';//FotoTarot_005.jpg
$fileJpg = 'views/images/FotoTarot_005.jpg';//
//Ruta en el servidor.
$nombre_archivo = 'FotoTarot_005.jpg';
$rutaCarpetas = "views/images/$nombre_archivo";
$imagedataFile = file_get_contents($file);
$imagedataJpg = file_get_contents($fileJpg);
$imgs = file_get_contents($rutaCarpetas);
echo '<p>Imagen con datos numéricos</p>';
echo '<img src="data:image/jpeg;base64,'.base64_encode($imagedataFile).'"/>';
echo '<p>Imagen con ruta normal</p>';
echo '<img src="data:image/jpeg;base64,'.base64_encode($imagedataJpg).'"/>';
echo '<p>Imagen desde ruta carpetas</p>';
echo '<img src="data:image/jpeg;base64,'.base64_encode($imgs).'"/>';
?>
Aquí como comento anteriormente las imágenes cargan perfectamente tanto en el servidor local como en el servidor de la web, sin embargo no se aún como darle un tamaño previo especificado antes de cargarlas.
Finalmente vuelvo a a hacerme la misma pregunta ¿entre esas dos posibles opciones cual seria la más recomendable?
@a-cedano, no se si cuando hablabas del blob te referías a la parte donde lo hago con base64 donde en un campo de la tabla lo tenemos con byte codificados y otra con los nombres, aunque creo que finalmente solo trabajemos con los nombres de archivos pero aun es una opción a contemplar.
Gracias de nuevo por vuestra ayuda, saludos.
Edición 2
Hola de nuevo.
Vuelvo a recuperar este tema ya que sigo sin resolverlo.
En cuanto a base64 no se si lo estoy haciendo correctamente y aun sigo sin saber como llamar o dar un ancho y alto previo para imprimir la imagen antes de codificarla.
Por otro lado retomando también la opción con header en redimensaionador.php veo que añadiendo en el código ob_clean(); entonces el archivo en sí aparece con la imagen pero cuando lo llamo desde el archivo real que lleva las imágenes sigue sin mostrarlo.
redimensionador.php
<?php
//Redimensionador
//Opción 1 para cargar desde otro archivo.
$nombre_archivo = "ajo_tradiciones.jpg";
$rutaCarpetas = "views/images/$nombre_archivo";
$img = imagecreatefromjpeg($rutaCarpetas);
$imgs = getimagesize($rutaCarpetas);
$w = $imgs[0];
$h = $imgs[1];
$escala_w = 70/$w;
$escala_h = 70/$h;
$nuevo_ancho = floor($w*$escala_w);
$nuevo_alto = floor($h*$escala_h);
$tp = imagecreatetruecolor($nuevo_ancho, $nuevo_alto);
imagecopyresampled($tp, $img, 0,0,0,0, 70, 70, $w, $h);
ob_clean();//Añadiendo ob_clean logro que online se muestre la imagen.
//Con esta opción logro verla en pantalla con el nuevo tamaño 70x70
Header("Content-type: image/jpeg");
imagejpeg($tp, NULL, 100);
imagedestroy($img);
?>
Ahora si puedo verla en el servidor online con la pantalla negra y la imagen en el centro, pero cuando la quiero llamar desde el archivo real que cargará la imagen, en este caso crop-cargador.php en el servidor online sigue sin aparecer:
<p>Opción redimensionada desde archivo externo</p>
<img src="redimensionador.php" />
<p>Opción redimensionada desde archivo externo desde la ruta de carpetas</p>
<img src="views/modules/redimensionador.php" />
¿Qué estoy haciendo mal?
Saludos.
base64_encode
junto condata:image/jpg;base64
para obtener la imagen como un archivo cualquiera y ponerla en una etiquetasrc
. Dentro de la misma etiqueta o mediante una clase CSS, puedes darle el tamaño que quieras. Aquí hay un ejemplo donde se implemente un código muy parecido a lo que necesitas.imagecreatefromjpeg
, se crea la imagen usandobase64_encode
con los datos BLOB obtenidos. Si lo mezclas conimagecreatefromjpeg
no tendría sentido y muy probablemente no va a funcionar. ¿Acaso la imagen no es del tipo BLOB en la BD? Mira aquí otro ejemplo parecido al mío. Si observas, no se usaimagecreatefromjpeg
. El Manual de PHP dice claramente que esa función es para archivos o URLs, no es para datos BLOB.base64_encode
y luego con el resultado de eso, implementardata:image/jpg;base64,
A mi no me queda claro en qué variable de tu código se guarda el dato BLOB, si en$nombre
o en$tp
o dónde ¿? Sea como sea, debes probar el código limpiamente, sin todas esas llamadas que haces, que sirven para archivos pre-existentes de imágenes. Son dos manejos distintos.