check if browser supports data uri at run time - request

Question

I am looking to use data uri base 64 strings in my asp.net c# web application. I know only some browsers support this, so at runtime I will need to check if the current browser supports base 64 strings.
From the users request object, I can access the HttpBrowserCapabilitiesWrapper object which describes the current browser.
Is it possible to find based on this if the browser supports data uri's? Or if not based on this object, is there any way at runtime I can check if the browser supports data uri's?

Answer 1

You cannot determine whether the browser supports data uri or not on the server side. HttpBrowserCapabilitiesWrapper does not provide that information. According to my knowledge except IE(< 7 version) all the browsers support base 64 encoded strings. You can basically use trial and error approach to handle such situations if you dont want to code browser specific.
<img src="data:image/gif;base64,..." onabort="function(){this.src='urlWhichWillRenderBinaryData'}" onerror="function(){this.src='urlWhichWillRenderBinaryData'}" />
onabort/onerror event will be fired if the image is not rendered properly.

Answer 2

have a look to this link, to put it simple it tries to load in image using data uri, if size is wrong it means that your browser doesn't support data uri and then you have to roll back to a backup solution.
Hope this helps

Answer 3

ShankarSangoli's answer may not work as written. IE 6, for instance, will attempt to load the src and fire the onerror event before your onerror function is assigned.
For this to work, you should assign onerror prior to setting the src value (can't be done entirely in markup):
Markup:
<img data-uri="{data-uri-value}" data-fallback-url="{fallback-url}" class="imageuri" />
jQuery:
$('.imageuri').each(function () {
this.onabort = this.onerror = function () {
$(this).attr('src', $(this).attr('data-fallback-url'));
};
$(this).attr('src', $(this).attr('data-uri'));
});
Tested in IE 6, IE 9 and Chrome 16.