Imágenes en base-64 para Internet Explorer

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:

Base64 encoded image

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:

Error imágen base64

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

3 thoughts on “Imágenes en base-64 para Internet Explorer

  1. 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!.

  2. Hola! Consulta: estoy haciendo un mail html embebiendo imágenes de esta manera. Los clientes de email son todos compatibles con esta forma? Justamente mi cliente tiene IE y no puede ver la muestra que le mandé en html. Hay forma de solucionarlo sin usar php?

  3. Epa!….muchas gracias, realmente muy útil, lo he probado y me ha servido, sin embargo sólo para versiones de Internet Explorer superiores al 7….en IE 7 no funcionó, pero no hay lío , esta versión está mandada a recoger(Ojala fueran todas mandads a recoger jaj)

Comments are closed.