PHP - Llamar a una imagen redimensionada en thumbnail desde su html src

 
Vista:
Imágen de perfil de José Carlos
Val: 31
Ha disminuido su posición en 5 puestos en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por José Carlos (15 intervenciones) el 28/04/2019 13:10:44
Buenas.

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"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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 <img 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 muestars con Header("Content-type: image/jpeg"); que las deja en medio con un fondo negro.

Saludos.

PD: Después de muchos pero muchos años visitando este foro y la web por fin me animo a participar.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.634
Plata
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por Alejandro (837 intervenciones) el 28/04/2019 16:36:49
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Si ya redimensionas la imagen y la muestras con Header("Content-type: image/jpeg") el trabajo esta hecho solo pon el archivo php en el src de la imagen
1
<img src="redimensionador.php" />
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de José Carlos
Val: 31
Ha disminuido su posición en 5 puestos en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por José Carlos (15 intervenciones) el 29/04/2019 12:27:03
Hola de nuevo.

Por ahora me sirve tu solución, por ejemplo si creo un nuevo archivo "cargar-thumb.php" y dentro de este llamo al php del thumb que redimensiona (""thumbnail-crop-final.php") como bien dices parece que va correctamente.


cargar-thumb.php

1
<img src="thumbnail-crop-final.php" />


No se si será la mejor manera para mejorar la velocidad de la página pero al menos ya me funciona. ¿Alguna otra recomendación?

Gracias Alejandro, saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.634
Plata
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por Alejandro (837 intervenciones) el 29/04/2019 16:03:41
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Las opciones que conozco son:

- Procesar las imágenes cada que se requieren, lo que actualmente haces, así pues cada que se requiere el thumb es creado consumiendo recursos del servidor.

- Crear el thumb al subirlas las imágenes, tendrás 2 imágenes la original y el thumb consumiendo más espacio en disco.

¿Cual es la mejor? Creo que es relativo al proyecto pero me gustaría escuchar los puntos de vista de los demás.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Mauro
Val: 2.761
Oro
Ha aumentado 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por Mauro (1034 intervenciones) el 29/04/2019 15:44:16
Hace un tiempo tuve un problema similar y adopté una solución basada en ImageMagick que, además incorporaba algún mecanismo de caché para hacerlo más eficiente.

Puedes consultar los detalles aquí.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de José Carlos
Val: 31
Ha disminuido su posición en 5 puestos en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por José Carlos (15 intervenciones) el 28/06/2019 20:44:19
Hola de nuevo, por fin puedo recuperar este tema.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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?

Mauro, me parece una interesante propuesta, aun no la he podido probar.

Gracias de nuevo por vuestra ayuda, saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Mauro
Val: 2.761
Oro
Ha aumentado 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por Mauro (1034 intervenciones) el 29/06/2019 16:35:46
Pues mira, yo tengo un desarrollo hecho que puede solucionarte el problema ya que parece prácticamente idéntico al que tuve yo.

Puedes leer los detalles aquí. Creí que tenía el código publicado en GitHub pero parece que no... lo voy a publicar apenas pueda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de José Carlos
Val: 31
Ha disminuido su posición en 5 puestos en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por José Carlos (15 intervenciones) el 02/07/2019 16:54:38
Hola de nuevo.

Vuelvo a recuperar este tema ya que sigo sin resolverlo.

Mauro, la verdad es que he intentado seguir tu tutorial pero me parece un poco avanzado para lo que estoy haciendo ahora y por ahora voy a intentar antes resolver las dos opciones que comentaba anteriormente.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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:

1
2
3
4
<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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de José Carlos
Val: 31
Ha disminuido su posición en 5 puestos en PHP (en relación al último mes)
Gráfica de PHP

Llamar a una imagen redimensionada en thumbnail desde su html src

Publicado por José Carlos (15 intervenciones) el 09/07/2019 23:51:21
Finalmente he utilizado $_SERVER["DOCUMENT_ROOT"]; y parece que por fin lo consigo.

redimensionador.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
//Opción 1 para cargar desde otro archivo.
//Nombre del archivo
$nombre_archivo = "ajo_tradiciones.jpg";
//Ruta absoluta desde el directorio Raiz del servidor.
$rutaRaiz = $_SERVER["DOCUMENT_ROOT"];
$rutaCarpetas = $rutaRaiz."/views/images/$nombre_archivo";//Carga
 
$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();
//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);
?>

crop-cargador.php


1
2
3
<?php $url = Ruta::ctrRuta(); // https://dominio.com/ ?>
<p>Cargo la imagen desde la ruta de la url absoluta.</p>
<img src="<?php echo $url ?>views/modules/redimensionador.php" />

Lo dejo ahí por si le puede servir a alguien más.

Gracias por vuestra gran ayuda.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar