Eli Grey

APNG feature detection

Mar 3, 2009 15 comments

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]
}());

Tagged: APNG, Browsers, feature detection, JavaScript, JavaScript Libraries, JavaScript Snippets, Projects

❧

Pingback: Ajaxian » Detect if the browser supports APNG
Pingback: Detect if the browser supports APNG | Guilda Blog
www.commadot.com Glen Lipka

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

Sorry, my bad. I thought this was about PNGs versus APNGs. Reading a little bit too quickly.
Pingback: Detecta si en tu browser funcionan imagenes APNG | Dakoo -- javascript, mootools, tecnologias web, web 2.0, css,xhtml y temas en general
Pingback: Poniendonos al día, un poco de todo | aNieto2K
Pingback: APNG Support Test - Tools - Canvas Demos
Max

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

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

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.
- eligrey.com/ Eli Grey
  
  Hosting an APNG image on an external server but serve it with an Access-Control-Allow-Origin: * header should work.
  - Max
    
    If I have "Load images automatically" option turned off, Firefox reports "APNG Supported: No".
dharmafly.com Premasagar

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);
- eligrey.com/ Eli
  
  It seems that data: URI security error issue is no longer present in more recent browsers. I will update my post accordingly.
Pingback: Как показать APNG или GIF в зависимости от браузера? | AnimatedPNG.ru