Imágenes en base-64 para Internet Explorer
Publicado en Programación el 15 de June de 2009 por Manel Pérez MataTags: HTML, JavaScript, PHP
Prácticamente todos los navegadores actuales, soportan imágenes codificadas en base64, sin embargo, esto no pasa con Internet Explorer (hasta su versión 7 al menos). Estareis pensando que no debería ser un problema ya que no solemos colocar las imágenes codificadas en el código html, sin embargo, podemos encontrarnos con la necesidad de tener embedida la imágen dentro del código por motivos x.
Un ejemplo de uso de imágenes en base64 en el código html sería:
<img src="data:image/gif;base64,R0lGODlhNQAkAKIAAHJycvwHBwAAqwCjC+3PDv///wAAAAAAACwAAAAANQAkAAAItAAHCBxIsODAAggTKlyYMIDDhxAjOjRIsSDDiwslaoRYseMAjCALbBzpsWJIjCM3lqR48mJKjSsNtmT4UmJMizMV1ox4k2BOnTsf9jz4E2FQoUM/FhV5NEBSpUWbOk26lOnRp1WlYl2qlSrXplujgvUq9irZn12HZh2r9qvZtmWDhkXLtufat3bdyj2bM23euDvn9q178+5euHTxFtYbmO9Mv4sB1xT8mHBMw40RD1Z8mXHNgAA7" width="200" alt="Base64 encoded image" />
Nos dará como resultado la siguiente imágen:
mira el código fuente si todavía tienes dudas 
Sin embargo, si estás viendo este artículo desde un navegador Internet Explorer (un consejo desde el cariño… cambia a mozilla Firefox), verás algo similar a esto:
¿Cómo podemos solucionarlo? Pues de una manera bastante sencilla, podemos pedir a PHP mediante JavaScript que nos haga la decodificación del código base64:
<?php
if(!empty($_SERVER["QUERY_STRING"])) {
$data = split(";", $_SERVER["QUERY_STRING"]);
$type = $data[0];
$data = split(",", $data[1]);
header("Content-type: ".$type);
echo base64_decode($data[1]);
die();
} else {
?>
<html>
<body>
<script>
// Expression Regular para encontrar imágenes en Base64
var BASE64_DATA = /^data:.*;base64/i;
// Path al script php que decodifica el código
var base64Path = "prueba.php";
function fixBase64(img) {
// check the image source
if (BASE64_DATA.test(img.src)) {
// pass the data to the PHP routine
img.src = base64Path + "?" + img.src.slice(5);
}
};
// fix images on page load
onload = function() {
for (var i = 0; i < document.images.length; i++) {
fixBase64(document.images[i]);
}
};
</script>
<img src="data:image/gif;base64,R0lGODlhNQAkAKIAAHJycvwHBwAAqwCjC+3PDv///wAAAAAAACwAAAAANQAkAAAItAAHCBxIsODAAggTKlyYMIDDhxAjOjRIsSDDiwslaoRYseMAjCALbBzpsWJIjCM3lqR48mJKjSsNtmT4UmJMizMV1ox4k2BOnTsf9jz4E2FQoUMFhV5NEBSpUWbOk26lOnRp1WlYl2qlSrXplujgvUq9irZn12HZh2r9qvZtmWDhkXLtufat3bdyj2bM23euDvn9q178+5euHTxFtYbmO9Mv4sB1xT8mHBMw40RD1Z8mXHNgAA7" alt="Base64 encoded image" width="150" height="150"/>
</body>
</html>
<?php
}
?>
Como podemos ver, la función JavaScript fixBase64 chequea que el source de la imágen contenga las palabras “data:xxxxx;base64″, en caso afirmativo, le envía toda la información contenida en el source a PHP. Este, utiliza la función base64_decode para traducirla y la devuelve a la página. En este momento, se verá perfectamente en cualquier navegador que tenga JavaScript habilitado.
(No Ratings Yet)
Loading ...
(4.33 out of 5)
October 15th, 2009 21:45
saludos!.. hoy no se por qu cada dia crece y crece mas el mi odio por IE..!… bueno ya me diste una idea de como solucionar esto, yo estaba usando el “truco” de condificar las imagenes para traermelas en un json junto con la informaicon y hacer solo una peticion al server.. pero ho sorprsa.. en el Fuck IE7 no jala..
.. bueno por ahorita me diste la idea de como solucionarlo.. auque no me late por que de cualquier forma tengo que hacer otra peticion al server y es algo que no queria.. pero ps ya ni pedo!.. thanks x la idea!.