check if browser supports data uri at run time

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?

You also can't rely on the browsers name because if it has addons they can enable/disable that feature — Randall Flagg, Aug 23 '16 at 09:38

score 4 · Answer 1 · answered Jul 23 '11 at 01:05

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.

score 2 · Answer 2 · answered Jul 21 '11 at 17:38

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

answered Jul 21 '11 at 17:38

wezzy

5,897
3
31
42

Thanks but this is client side, I require a server side solution. – amateur Jul 21 '11 at 20:44
3

You can't know for sure on the server side if the client supports something. – Bryan Boettcher Jul 22 '11 at 19:30
2

You can't handle this serverside, a quick trick is to put an empty page with only the javascript to check the available types and then the js code move the browser to the real page adding your formats in the url using window.location.href. I know it's a trick but it should work. – wezzy Jul 24 '11 at 14:39

score 2 · Answer 3 · edited May 23 '17 at 12:00

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.

check if browser supports data uri at run time

3 Answers3