Base64 image fix for Internet Explorer

Although Internet Explorer 6 has been released for almost ten years, it is not likely that people are rushing to have a newer version, or even better alternative, of this piece of software among the hospitals.

For this famous version of Internet Explorer, trivial like unsupported image display in a way of data URI scheme seem to be annoying while nurses and doctors complain that they can't really see the chart images or even signature image (supposing in smaller size) on the web pages.

Although data uri images are widely supported by the other web browsers like Chrome, Firefox, Safari and Opera, there is strong reason for us to take care of IE. We have to accept that it is still a web browser which is widely spread among those ward computers, i.e., a niche market for web developer.

For any advancer who keeps using new stuff to catch the eyes, there will always be a dilemma on backward compatibility. By looking around in the sea of Google searches, I can barely find quite a lot of opinions on solving the problem. Most of them would urge you to keep focusing on the browsers. While some other developers suggest an intrusive way to modify almost every web page in the project, I prefer this way:

http://dean.edwards.name/weblog/2005/06/base64-ie/

It was found from a blog article since 2005 but it sheds the light on a question:

Can we actually repair (fix) those images after they have been shown up on a incompatible browser?


The answer is yes. 


Here is the recipe:

• JQuery core script file for integration.
• A custom JQuery function in Javascipt file.
• A min-sized PHP script file for Base64 image data processing.

By using client-side Javascript and an external PHP file, we can redirect in-line Base64 image stream data to external HTTP request for obtaining a compatible image object back from server-side image processing.

For nowadays web solution like PHP (v5.3) + JQuery (v1.6), it is not bad to review the source code from the above blog article and see what we can do for the new decade.


We would like to apply the fix with one function call fixBase64Image() once the web page is loaded completely. This function will search through the DOM elements and apply the fix to the target elements appropriately. A check on browser type and version is also possible to eliminate unnecessary action on non-related element. The target elements here are the image elements "img" with search criteria for the property of image source "src" which contains data uri stream like:

img src="data:image/gif;base64,..."

For client-side Javascript function (supposing JQuery has been involved in your project):

function fixBase64Image() {
 var BASE64_data = /^data:.*;base64/i;
 var BASE64_Path = "base64transfer.php";
 if ($.browser.msie){
  $("img").each(function(){
   // check matched image source
   if (BASE64_data.test($(this).attr("src"))) {
    // pass image stream data to external php
    var newSrc = BASE64_Path + "?" + ($(this).attr("src")).slice(5);
    $(this).attr("src",newSrc);
   }
  });
 }
 
};

The Javascript function will repair the broken images by replacing the source path of IMG element with an external PHP request to "base64transfer.php" while Base64 image data is encapsulated in HTTP request as the query string.


For the newly created external PHP file named "base64transfer.php",five lines of code are enough to support this:

$data = splitexplode(";", $_SERVER["QUERY_STRING"]);

$type = $data[0];
$data = splitexplode(",", $data[1]);

header("Content-type: ".$type);
echo base64_decode($data[1]);

This PHP script simply converts the query string, supposing a long string of Base64 image data, into raw image stream data and then send it back to the browser for image display.


This can be considered as a quick fix to the lack of support to Base64 in-line images in Internet Explorer 6.