The Animated Portable Network Graphics (APNG) file format is an extension to the Portable Network Graphics (PNG) specification. It allows for animated PNG files that work similarly to animated GIF files while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility with non-animated PNG files., see the Wikipedia webpage.
To detect the browser APNG capabilities we can use this source code.
Create a new HTML5 file and into the head tag and add this source code:
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript">(function() { "use strict"; var apng_image = new Image(), ctx = document.createElement("canvas").getContext("2d"); apng_image.onload = function () { ctx.drawImage(apng_image, 0, 0); self.apng_supported = ( ctx.getImageData(0, 0, 1, 1).data[3] === 0 ); }; apng_image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg=="; }());</script> |
Into the body tag section use this script code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript"> //<![CDATA[ if (typeof apng_supported !== "boolean") { var apng_supported = false; } onload = function () { var apngSupportedHeader = document.createElement("h2"), supported = document.createElement("span"); supported.style.color = apng_supported ? "blue" : "red"; supported.appendChild(document.createTextNode(apng_supported ? "Yes" : "No")); apngSupportedHeader.appendChild(document.createTextNode("APNG Supported: ")); apngSupportedHeader.appendChild(supported); document.body.appendChild(apngSupportedHeader); }; //]]> </script> |