c'è un modo praticabile per caratterizzare rilevare il supporto per un'immagine: base64 dati

Question

usando qualcosa sulla falsariga di:

background:url(data:image/gif;base64,R0lGODlhIwAhALMAAAAAADQ0NENDQ25ubouLi6ioqLa2ttPT0/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAACwAAAAAIwAhAAAIpQABCBxIsCCAAAYTKlw4cECCAQwjMnSY4KHEiwQpVrSIUaLGjRw7Kvy4EYEAkSNBljyJ0iDJiiZbulQJk6XMhjQTxLyJk+ZOngBe6rTJU+jPojmTKqXZc6nTpAKFPp0qsMDUqyoHWsWKleBWrk8LfgV5AKjYnGXNakWrdi3NtG3HbjTQtmrOAnUByK2It+7eBH3j5iSQVy5cv3PzegWsuCDExmYDAgA7) no-repeat center center;} 

va bene ma voglio essere in grado di fornire graceful degradation (l'affermazione CSS è tramite JavaScript) quando base64 non è disponibile.

ovviamente, IE prima di v8 manca questa funzionalità in modo che potrei andare da browser - ma preferirei averlo rilevato funzione, se possibile.

qualche idea su come si fa a farlo?

Answer 1

Questo potrebbe essere quello che stai cercando: http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/

ho lavorato su una sceneggiatura che aggiunge un supporto parziale del regime DataURI in IE6 +: http://phenxdesign.net/projects/phenx-web/iedatauri/example.php e il codice è qui: http://code.google.com/p/phenx-web/source/browse/trunk/iedatauri/

IE5 + supporta un tipo di dati URI troppo, è ma non sempre possibile utilizzarlo: http://www.betalon.com/blog/html_css/data-uri-in-css-crossbrowser.htm

Answer 2

Utilizzando quanto sopra per estendere le mootools Browser.Features oggetto (se qualcuno trova utile, Modernizr non lo supporta)

http://www.jsfiddle.net/dimitar/5JT45/13/show/ o https://gist.github.com/821370

(function() { 
    Browser.Features.base64 = null; 
    var callback = function() { 
     Browser.Features.base64 = this.width == 1 && this.height == 1;   
     // alert(Browser.Features.base64); // true || false 
    }; 

    var img = new Image(), img = document.id(img) || new Element("img"); 
    img.onload = img.onerror = img.onabort = callback; 
    // 1x1 px gif to test with 
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 

})(); 

Answer 3

Abbiamo trovato questo plug-in per Modernizr sulla loro wiki https://github.com/Modernizr/Modernizr/issues/14:

Modernizr.addTest('datauri',function(){ 
    var data = new Image(); 
    data.onload = data.onerror = function(){ 
    return (this.width == 1 && this.height == 1); 
    } 
    data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
})