{"id":13527614,"url":"https://github.com/davidmz/apng-canvas","last_synced_at":"2026-03-11T22:41:02.640Z","repository":{"id":47952398,"uuid":"1894926","full_name":"davidmz/apng-canvas","owner":"davidmz","description":"APNG implementation on canvas.","archived":false,"fork":false,"pushed_at":"2022-12-04T15:43:42.000Z","size":3775,"stargazers_count":678,"open_issues_count":8,"forks_count":92,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-12-21T18:41:03.019Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://davidmz.github.io/apng-canvas/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidmz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-06-14T15:06:10.000Z","updated_at":"2025-11-21T02:58:58.000Z","dependencies_parsed_at":"2023-01-23T20:00:43.044Z","dependency_job_id":null,"html_url":"https://github.com/davidmz/apng-canvas","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/davidmz/apng-canvas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmz%2Fapng-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmz%2Fapng-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmz%2Fapng-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmz%2Fapng-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidmz","download_url":"https://codeload.github.com/davidmz/apng-canvas/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmz%2Fapng-canvas/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30405552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T22:36:59.286Z","status":"ssl_error","status_checked_at":"2026-03-11T22:36:57.544Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:01:53.978Z","updated_at":"2026-03-11T22:41:02.604Z","avatar_url":"https://github.com/davidmz.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"apng-canvas v2.1.0\n==============\n\n([README по-русски](https://github.com/davidmz/apng-canvas/blob/master/README_RU.md))\n\nLibrary to display Animated PNG ([Wikipedia](http://en.wikipedia.org/wiki/APNG), [specification](https://wiki.mozilla.org/APNG_Specification)) in a browser using canvas.\n\nWorking demo: https://davidmz.github.io/apng-canvas/ (around 3 Mb of apng files)\n\n**Please note! API version 2 of the library is incompatible with the API version 1!**\n\nThe library requires support from the following technologies in order to run:\n\n * [Canvas](http://caniuse.com/#feat=canvas)\n * [Typed Arrays](http://caniuse.com/#feat=typedarrays)\n * [Blob URLs](http://caniuse.com/#feat=bloburls)\n * [requestAnimationFrame](http://caniuse.com/#feat=requestanimationframe)\n \nThese technologies are supported in all modern browsers and IE starting with version 10.\n\n\nSome browsers (at the moment these are Firefox and Safari 8+) have [native support for APNG](http://caniuse.com/#feat=apng). \nThis library is not required for these browsers.\n\nUsage example\n-----------\n\n```javascript\nAPNG.ifNeeded().then(function() {\n    var images = document.querySelectorAll(\".apng-image\");\n    for (var i = 0; i \u003c images.length; i++) APNG.animateImage(images[i]);\n});\n```\n\nLimitations\n-----------\n\nImages are loaded using `XMLHttpRequest`, therefore, the HTML page and APNG image must be located on the same domain\nor the correct [CORS](http://www.w3.org/TR/cors/ \"Cross-Origin Resource Sharing\") header should be provided\n(for example, `Access-Control-Allow-Origin: *`).\nFor the same reason, the library will not work on a local machine (using the protocol `file://`).\n\n**Important note!** Compression proxies (turbo mode in Opera, \"reduce data usage\" mode in mobile Chrome, etc.), doesn't know about\nAPNG format. These proxies transforms APNGs into static images. To prevent it for *your* images, they need to be served with \n`Cache-Control: no-transform` HTTP header (see [big article](http://calendar.perfplanet.com/2013/mobile-isp-image-recompression/) about such proxies),\nor via HTTPS.\n\n\nAPI\n-----------\n\nThe library creates a global object **APNG**, which has several methods.\n\nHigh-level methods:\n\n* [APNG.ifNeeded](API.md#user-content-apngifneededignorenativeapng-boolean)\n* [APNG.animateImage](API.md#user-content-apnganimateimageimg-htmlimageelement)\n* [APNG.releaseCanvas](API.md#user-content-apngreleasecanvascanvas-htmlcanvaselement)\n\nLow-level methods:\n\n* [APNG.checkNativeFeatures](API.md#user-content-apngchecknativefeatures)\n* [APNG.parseBuffer](API.md#user-content-apngparsebufferdata-arraybuffer)\n* [APNG.parseURL](API.md#user-content-apngparseurlurl-string)\n* [APNG.animateContext](API.md#user-content-apnganimatecontexturl-string-canvasrenderingcontext2d-context)\n\nMost methods work asynchronously and return the ES6 *Promise* object. Most browsers have [built-in support](http://caniuse.com/#feat=promises) for it. \nFor others browsers, library uses [polifill](https://github.com/jakearchibald/es6-promise) (included in the library).\nIf you have not worked before with Promises, then you should read the [review paper](http://www.html5rocks.com/en/tutorials/es6/promises/) about this technology. \nThe method description includes values of the Promise result in cases where it is *fulfilled* or *rejected*.\n\nBuild instructions\n-----------\n\n    npm install\n    gulp build","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidmz%2Fapng-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidmz%2Fapng-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidmz%2Fapng-canvas/lists"}