Foros del Web » Creando para Internet » HTML »

Imágenes incrustadas en el mismo html

Estas en el tema de Imágenes incrustadas en el mismo html en el foro de HTML en Foros del Web. Sólo puedo usar un archivo (html) y en él debo mostrar imágenes, sin depender de ningún archivo externo ni de conexiones a internet. Investigando, encontré ...
  #1 (permalink)  
Antiguo 08/09/2006, 14:55
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.062
Antigüedad: 13 años, 6 meses
Puntos: 775
Imágenes incrustadas en el mismo html

Sólo puedo usar un archivo (html) y en él debo mostrar imágenes, sin depender de ningún archivo externo ni de conexiones a internet. Investigando, encontré esta manera de mostrar las imágenes, la cual funciona en casi todos los navegadores excepto en... Exacto, adivinaron: IE... Entonces, la pregunta es: cómo hacer algo parecido y que funcione en explorer sin usar lenguaje de servidor:
Código:
<img src="data:image/jpeg;base64,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">
  #2 (permalink)  
Antiguo 10/09/2006, 09:21
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.062
Antigüedad: 13 años, 6 meses
Puntos: 775
Finalmente veo que no me queda otra opción que hacer 2 archivos: 1 para los navegadores standard con extensión htm o html y el código mostrado antes, y otro con extensión mhtml para IE, con un código semejante a este (lo escribo por si a alguien le sirve o interesa):
Código:
MIME-Version: 1.0
Content-Type: multipart/related; boundary="==boundary-1"; type="text/html"

su navegador no admite este formato
--==boundary-1
Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: 7bit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD><TITLE>Test message no. 1</TITLE>
</HEAD>
<BODY>

<IMG SRC="cid:pepe">

</BODY></HTML>

--==boundary-1
Content-Type: image/jpeg
Content-ID: <pepe>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="red-test-image.jpg"

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
--==boundary-1--

Última edición por Panino5001; 10/09/2006 a las 09:27
  #3 (permalink)  
Antiguo 12/09/2006, 11:54
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
¿No te funcionará el svg?
Supongo que el que pones es math html o algo así.
  #4 (permalink)  
Antiguo 12/09/2006, 12:38
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.062
Antigüedad: 13 años, 6 meses
Puntos: 775
El problema es que IE no soporta el esquema data:uri, por eso debo crear 2 archivos, el primero para los navegadores estandar, en formato html con esquema data:uri e imágenes codificadas en base64, y otro en formato mime (guardado como mhtml) para explorer y ópera (aunque ópera soporta ambos formatos).
Aunque use svg, el problema sigue siendo la falta de soporte de IE.

Última edición por Panino5001; 12/09/2006 a las 17:51
  #5 (permalink)  
Antiguo 16/09/2006, 12:40
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Está super interesante la alternativa a las imagenes jpg, pero ¿como "trueno" una imagen jpg en codigo de texto?
¿Solo para imagenes 8 bits? o pueden ser 24 bits?
¿Y el canal alpha?
  #6 (permalink)  
Antiguo 18/09/2006, 16:43
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.062
Antigüedad: 13 años, 6 meses
Puntos: 775
Podés codificar cualquier imagen en base64 así:
Código PHP:
<?php
echo base64_encode(file_get_contents('http://www.dominio.com/images/laimagen.jpg'));
?>
  #7 (permalink)  
Antiguo 18/09/2006, 17:05
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Ooooooohhhhhh.
  #8 (permalink)  
Antiguo 18/09/2006, 17:26
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Es increible como una cosa lleva a la otra.
¿Qué otros tipos de codificación o data hay?

Código PHP:
data:image/jpeg;base64
  #9 (permalink)  
Antiguo 18/09/2006, 18:00
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.062
Antigüedad: 13 años, 6 meses
Puntos: 775
Fijate aquí:
http://www.asahi-net.or.jp/en/guide/cgi/mimetype.html
  #10 (permalink)  
Antiguo 18/09/2006, 18:14
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Ok... ..........
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.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:53.