Imágenes como tablas en HTML
Hace unos meses me encontré con el problema de tener que realizar páginas HTML de texto puro sin poder incrustar imágenes. Sin embargo, había que insertar un pequeño logotipo del cliente.
El problema puede resolverse convirtiendo la imagen del logotipo en una gran tabla HTML de celdas de tamaño de 1 pixel por 1 pixel y cada una del color de fondo de su pixel asociado.
En la imagen de este post puede verse el logotipo en imagen PNG, en este caso de ejemplo mi propio logotipo, no el del cliente, y abajo la misma imagen como tabla.
Como para esta publicación no he utilizado el logotipo original de la empresa que me lo encargó, sino el mio, y para simplificar el ejemplo sólo he utilizado 3 colores en la tabla, es por eso que se nota el pixelado. Pero si se usan más colores el resultado puede se muy parecido al logotipo original en imagen.
En estos casos, y limitándome a 16 colores, suelo convertir las imágenes en formato BMP (bitmap) a especificaciones en texto utilizando el conversor Bmp2Ico realizado por Juan Ramón Miráz y por mi.
Incluyo dos realizaciones del mismo código fuente: con CSS sólo para la página y con CSS para las celdas de la tabla por lo que el tamaño del código a 1/3. Como página HTML de resultado sólo incluyo en el PDF la última, por ser más reducida.
A continuación se muestra parte del código TOL utilizado para esta conversión, aunque reducido en la parte del mapa de letras del logotipo para no saturar el post. En el código PDF que se adjunta a este post se puede ver el código fuente completo.
Set repTab =
[[
[["+", "<td class='r'></td>"]],
[[".", "<td class='b'></td>"]],
[["-", "<td class='s'></td>"]]
]];
Set picSet = [[
"+++++++-..................++++++++++++++++++++++++++++++++++",
"++++++-................+++++++++++++++++++++++++++++++++++++",
"++++++-...............++++++++++++++++++++++++++++++++++++++",
"+++++-..............++++++++++++++++++++++++++++++++++++++++",
... recortado ...
"++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++"
]];
Set repCic = EvalSet(picSet, Text(Text lin)
{ // Replace 1 time
" <tr>\n "+ReplaceTable(lin, repTab, 1)+"\n </tr>\n"
});
Text outHtm =
"
<html>
<head>
<style type='text/css'>
body { margin: 20px 20px 20px 20px; background-color: #ffffff; }
td.b { width: 1px; height: 1px; background-color: #ffffff; }
td.r { width: 1px; height: 1px; background-color: #ff0000; }
td.s { width: 1px; height: 1px; background-color: #ff9090; }
</style>
<title>Imagen en tabla</title>
</head>
<body>
<img src='logo.bmp'>
<br>
<br>
<br>
<table bgcolor='+ffffff' cellpadding=0 cellspacing=0 border=0>
"+
BinGroup("+",repCic)+
"
</table>
</body>
</html>
";
Text WriteFile("logocss.htm", outHtm);
