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] }()); |
[…] code above, written by Elijah Grey, will detect if a browser supports APNG or not. You can see a demo of it in action. Armed with this info you can choose whether to send […]
[…] code above, written by Elijah Grey, will detect if a browser supports APNG or not. You can see a demo of it in action. Armed with this info you can choose whether to send […]
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…
Sorry, my bad. I thought this was about PNGs versus APNGs. Reading a little bit too quickly.
[…] Para ver un demo o detectar si tu browser reconoce las imágenes APNG visita esto […]
[…] Detecta la posibilidad de usar APNG en tus aplicaciones web: Código Javascript que nos permite detectar la capacidad del navegador del usuario para usar imagenes APNG. […]
[…] View the APNG JavaScript tool, or see it in action to find out whether your browser supports APNG! (No Ratings Yet) […]
Better demo would be to show AGIF / APNG depending on browser support.
Better demo would be to show AGIF / APNG depending on browser support.
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.
Hosting an APNG image on an external server but serve it with an
Access-Control-Allow-Origin: *header should work.If I have "Load images automatically" option turned off, Firefox reports "APNG Supported: No".
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);
It seems that data: URI security error issue is no longer present in more recent browsers. I will update my post accordingly.
[…] всего, вам необходим данный apng-detect.js скрипт для определения, поддерживает ли клиентский […]