APNG Feature Detection

Posted on March 3, 2009 by Eli

I have made a simple script that utilizes the HTML5 <canvas> API in only 9 functional lines of JavaScript to detect if a browser supports APNG images. It can be useful for deciding when to serve a client browser APNG images instead of GIF images.
This will set the variable, apng_supported to true if the browser supports APNG.
I have also created a demo that uses this script.

(function() {
	"use strict";
	var apngTest = new Image(),
	ctx = document.createElement("canvas").getContext("2d");
	apngTest.onload = function () {
		ctx.drawImage(apngTest, 0, 0);
		self.apng_supported = ( ctx.getImageData(0, 0, 1, 1).data[3] === 0 );
	};
	apngTest.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg==";
	// frame 1 (skipped on apng-supporting browsers): [0, 0, 0, 255]
	// frame 2: [0, 0, 0, 0]
}());
This entry was posted in JavaScript, JavaScript Libraries, JavaScript Snippets, Projects and tagged , , . Bookmark the permalink.

13 Responses to APNG Feature Detection

  1. Pingback: Ajaxian » Detect if the browser supports APNG

  2. Pingback: Detect if the browser supports APNG | Guilda Blog

  3. Glen Lipka says:
    March 5, 2009 at 12:51 am

    I just recently found a way to make PNG-8 files that degrade (like GIF) files for IE6.
    http://commadot.com/png-8-that-acts-like-png-24-w...

  4. Glen Lipka says:
    March 5, 2009 at 1:48 am

    Sorry, my bad. I thought this was about PNGs versus APNGs. Reading a little bit too quickly.

  5. Pingback: Detecta si en tu browser funcionan imagenes APNG | Dakoo -- javascript, mootools, tecnologias web, web 2.0, css,xhtml y temas en general

  6. Pingback: Poniendonos al día, un poco de todo | aNieto2K

  7. Pingback: APNG Support Test - Tools - Canvas Demos

  8. Max says:
    December 19, 2009 at 12:28 pm

    Better demo would be to show AGIF / APNG depending on browser support.

  9. dan says:
    January 11, 2010 at 11:26 am

    Have anyone found another way to test for apng support?

    I'm in a situation where I can't use this because I can't host the test image in the same domain as the html.

  10. Premasagar says:
    June 12, 2010 at 12:45 pm

    This is really useful, Elijah. Can you give some more information on the security error you get? I don't get any error in Chrome 6, Firefox 3.63 or Opera 10.6 (all on Ubuntu) when modifying it to use a dataURI of the test APNG file.

    The code I'm using:

    (function(_global) {
    var apng_test = new Image(),
    ctx = document.createElement("canvas").getContext("2d");
    apng_test.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A gBAbNU 2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg==";
    apng_test.onload = function() {
    ctx.drawImage(apng_test, 0, 0);
    _global.apng_supported = ( ctx.getImageData(0, 0, 1, 1).data[3] == 0 );
    }
    })(window);

    • Eli says:
      June 13, 2010 at 4:09 pm

      It seems that data: URI security error issue is no longer present in more recent browsers. I will update my post accordingly.

blog comments powered by Disqus