{"id":313,"date":"2009-03-03T22:10:09","date_gmt":"2009-03-04T03:10:09","guid":{"rendered":"http:\/\/eligrey.com\/?p=313"},"modified":"2009-03-03T22:10:09","modified_gmt":"2009-03-04T03:10:09","slug":"apng-feature-detection","status":"publish","type":"post","link":"https:\/\/eligrey.com\/blog\/apng-feature-detection\/","title":{"rendered":"APNG feature detection"},"content":{"rendered":"<p>I have made a simple script that utilizes the HTML5 <code>&lt;canvas&gt;<\/code> 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.<br \/>\nThis will set the variable, <code>apng_supported<\/code> to <code>true<\/code> if the browser supports APNG.<br \/>\nI have also created a <a href=\"http:\/\/code.eligrey.com\/apng-detect\/demo.html\">demo<\/a> that uses this script.<\/p>\n<pre lang=\"javascript\">(function() {\n\t\"use strict\";\n\tvar apngTest = new Image(),\n\tctx = document.createElement(\"canvas\").getContext(\"2d\");\n\tapngTest.onload = function () {\n\t\tctx.drawImage(apngTest, 0, 0);\n\t\tself.apng_supported = ctx.getImageData(0, 0, 1, 1).data[3] === 0;\n\t};\n\tapngTest.src = \"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg==\";\n\t\/\/ frame 1 (skipped on apng-supporting browsers): [0, 0, 0, 255]\n\t\/\/ frame 2: [0, 0, 0, 0]\n}());<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I have made a simple script that utilizes the HTML5 &lt;canvas&gt; 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[6,15,44,90,91,93,133],"class_list":["post-313","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-apng","tag-browsers","tag-feature-detection","tag-javascript","tag-javascript-libraries","tag-javascript-snippets","tag-projects"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pfpUD-53","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":0,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"wp:attachment":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}