Detecting base64 support in javascript

Mike
@mikerfulcher on Twitter
6twenty on GitHub

Want to test if a browser supports base64 encoding? It's surprisingly easy :)

  1. // create a new image...
  2. var image = document.createElement('img');
  4. // define an onload callback...
  5. image.onload = function() {
  6.   testImage(image);
  7. }
  9. // set the source to a small base64 encoded image which has known dimensions
  10. // in this case, a 1x1 pixel gif...
  11. image.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  13. // test whether the loaded image has the correct dimensions (1x1 pixel)
  14. // browsers which don't support base64 won't be able to render the image, so
  15. // image.width and image.height won't return the expected values
  16. function testImage(image) {
  17.   var body = document.getElementsByTagName('html')[0];
  18.   if (image.width == 1 && image.height == 1) {
  19.     body.className = body.className + ' base64';
  20.   } else {
  21.     body.className = body.className + ' noBase64';
  22.   }
  23. }
  25. // our <html> now has an additional class which we can reference...
  26. console.log(document.getElementsByTagName('html')[0]);
  27. // => <html class=" base64"> ... </html>​

Posted Nov 16th, 2011. Tagged javascript, base64

blog comments powered by Disqus

© 2011 rawnet.com