Imágenes incrustadas en el mismo html

Panino5001 · #1 (**permalink**) 08/09/2006, 13:55

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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">

Panino5001 · #2 (**permalink**) 10/09/2006, 08:21

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--

Rafael · #3 (**permalink**) 12/09/2006, 10:54

¿No te funcionará el svg?
Supongo que el que pones es math html o algo así.

Panino5001 · #4 (**permalink**) 12/09/2006, 11:38

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.

Rafael · #5 (**permalink**) 16/09/2006, 11:40

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?

Panino5001 · #6 (**permalink**) 18/09/2006, 15:43

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'));

?>

Rafael · #7 (**permalink**) 18/09/2006, 16:05

Ooooooohhhhhh.

Rafael · #8 (**permalink**) 18/09/2006, 16:26

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,

Panino5001 · #9 (**permalink**) 18/09/2006, 17:00

Fijate aquí:
http://www.asahi-net.or.jp/en/guide/cgi/mimetype.html

Rafael · #10 (**permalink**) 18/09/2006, 17:14

Ok... ..........