[ { "path": ".babelrc", "content": "{\n \"presets\": [ \"env\" ],\n \"plugins\": [ \"transform-class-properties\" ]\n}\n" }, { "path": ".eslintrc.json", "content": "{\n \"env\": { \"es6\": true, \"browser\": true },\n \"parser\": \"@typescript-eslint/parser\",\n \"parserOptions\": {\n \"ecmaVersion\": 6,\n \"sourceType\": \"module\",\n \"ecmaFeatures\": {\n \"modules\": true\n }\n },\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/eslint-recommended\"\n ]\n}" }, { "path": ".gitignore", "content": ".*\n!.npmignore\n!.gitignore\n!.babelrc\n!.eslintrc.json\nnode_modules\nlib/" }, { "path": ".npmignore", "content": ".*\n!.npmignore\n!.gitignore\n!.babelrc\nnode_modules\nsrc/\ndocs/" }, { "path": "LICENSE.txt", "content": "The MIT License (MIT)\n\nCopyright (c) 2016 David Mzareulyan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# apng-js\n\n`apng-js` provides functions for parse and render animated PNG's \n([APNG](https://en.wikipedia.org/wiki/APNG)).\n \n## Demo page\n\n[https://davidmz.github.io/apng-js/](https://davidmz.github.io/apng-js/)\n \n## Usage\n`npm install apng-js`\n \n## API\n\n### parseAPNG(buf: ArrayBuffer): (APNG|Error)\n\n**Default exported function**. Parses APNG data, returns APNG object (see below) or Error.\nThis function can be used in node.js environment.\nObject methods relies on browser features (canvas, requestAnimationFrame…)\nand should work only in browser.\n\nUsage:\n```\nimport parseAPNG from 'apng-js';\n\nconst apng = parseAPNG(buffer);\nif (apng instanceof Error) {\n // handle error\n}\n// work with apng object\n```\n\n### isNotPNG(err: Error): boolean\n\nChecks if Error is 'Not a PNG' error.\n\n### isNotAPNG(err: Error): boolean\n\nChecks if Error is 'Not an animated PNG' error.\n\n## Classes\n\n### APNG\nStructure of APNG file.\n````\nclass APNG {\n width: number // with of canvas, pixels\n height: number // height of canvas, pixels\n numPlays: number // number of times to loop animation (0 = infinite looping)\n playTime: number // total duration of one loop in milliseconds\n frames: Frame[] // array of frames\n\n // Methods\n createImages(): Promise // create imageElement's for all frames\n getPlayer(context: CanvasRenderingContext2D, autoPlay: boolean = false): Promise.\n // Create Player (see below) on given context and start playing\n // if autoPlay is true.\n}\n````\n\n### Frame\nIndividual APNG frame.\n````\nclass Frame {\n left: number // left offset of frame, pixels\n top: number // top offset of frame, pixels\n width: number // with of frame, pixels\n height: number // height of frame, pixels\n delay: number // time to show frame in milliseconds\n disposeOp: number // type of dispose operation (see APNG spec.)\n blendOp: number // type of blend operation (see APNG spec.)\n imageData: Blob // image data in PNG (not animated) format\n \n imageElement: HTMLImageElement // image data rendered as HTML Image element.\n // This field is null right after 'parse',\n // use Frame.createImage() or APNG.createImages()\n // to fill this field.\n \n // Methods\n createImage(): Promise // create imageElement for this frame\n}\n````\n### Player\nPlayer renders APNG frames on given rendering context and plays APNG animation.\n````\nclass Player {\n context: CanvasRenderingContext2D\n playbackRate: number = 1.0 // animation playback rate\n \n currFrameNumber: number // current frame number (read only)\n currFrame: Frame // current frame (read only)\n paused: boolean // playback is paused (read only)\n ended: boolean // playback is ended (read only)\n\n // Methods\n play() // start or resume playback\n pause() // pause playback\n stop() // stop playback and rewind to start\n \n renderNextFrame() // move to next frame and render it on context\n // Use this method to manual, frame by frame, rendering.\n}\n````\n\nPlayer object is an [EventEmitter](https://nodejs.org/api/events.html). You can listen to following events:\n\n * **play** — playback started;\n * **frame** — frame played (frame number passed as event parameter);\n * **pause** — playback paused;\n * **stop** — playback stopped;\n * **end** — playback ended (for APNG with finite count of plays).\n" }, { "path": "docs/index.html", "content": "\n\n\n \n apng-js demo page\n \n \n\n\n
\n

apng-js demo

\n

\n See github.com/davidmz/apng-js.\n

\n

\n \n

\n
\n
\n
\n
\n
\n
\n

Animation on canvas

\n
\n
\n \n \n Playback rate (1.0)\n \n
\n
\n
\n

Events:

\n 
\n            
\n        
\n        
\n            
\n                
 APNG info: 
\n                
\n            
\n            
\n                
Frames
\n                
\n            
\n        
\n    
\n
\n\n\n"
  },
  {
    "path": "docs/index.js",
    "content": "/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n\n\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\n\tvar _parser = __webpack_require__(1);\n\n\tvar _parser2 = _interopRequireDefault(_parser);\n\n\t__webpack_require__(6);\n\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n\tvar fileInput = document.createElement('input');\n\tfileInput.type = 'file';\n\tfileInput.accept = 'image/png';\n\n\tdocument.getElementById('choose-btn').addEventListener('click', function () {\n\t  return fileInput.click();\n\t});\n\n\tfileInput.addEventListener('change', function () {\n\t  if (fileInput.files.length > 0) {\n\t    processFile(fileInput.files[0]);\n\t  }\n\t  fileInput.value = '';\n\t});\n\n\tvar player = null;\n\n\tdocument.getElementById('play-pause-btn').addEventListener('click', function () {\n\t  if (player) {\n\t    if (player.paused) {\n\t      player.play();\n\t    } else {\n\t      player.pause();\n\t    }\n\t  }\n\t});\n\n\tdocument.getElementById('stop-btn').addEventListener('click', function () {\n\t  return player && player.stop();\n\t});\n\n\tvar playbackRate = 1.0;\n\tdocument.getElementById('playback-rate').addEventListener('change', function (e) {\n\t  playbackRate = parseFloat(e.target.value);\n\t  document.getElementById('playback-rate-display').innerHTML = playbackRate.toString();\n\t  if (player) {\n\t    player.playbackRate = playbackRate;\n\t  }\n\t});\n\n\tfunction processFile(file) {\n\t  var resultBlock = document.querySelector('.apng-result');\n\t  var errorBlock = document.querySelector('.apng-error');\n\t  var errDiv = errorBlock.querySelector('.alert');\n\t  var infoDiv = document.querySelector('.apng-info');\n\t  var framesDiv = document.querySelector('.apng-frames');\n\t  var canvasDiv = document.querySelector('.apng-ani');\n\t  var logDiv = document.querySelector('.apng-log');\n\n\t  resultBlock.classList.add('hidden');\n\t  errorBlock.classList.add('hidden');\n\t  emptyEl(infoDiv);\n\t  emptyEl(framesDiv);\n\t  emptyEl(canvasDiv);\n\t  emptyEl(errDiv);\n\t  emptyEl(logDiv);\n\t  if (player) {\n\t    player.stop();\n\t  }\n\n\t  var log = [];\n\n\t  var reader = new FileReader();\n\t  reader.onload = function () {\n\t    var apng = (0, _parser2.default)(reader.result);\n\t    if (apng instanceof Error) {\n\t      errDiv.appendChild(document.createTextNode(apng.message));\n\t      errorBlock.classList.remove('hidden');\n\t      return;\n\t    }\n\t    apng.createImages().then(function () {\n\t      infoDiv.appendChild(document.createTextNode(JSON.stringify(apng, null, '  ')));\n\t      apng.frames.forEach(function (f) {\n\t        var div = framesDiv.appendChild(document.createElement('div'));\n\t        div.appendChild(f.imageElement);\n\t        div.style.width = apng.width + 'px';\n\t        div.style.height = apng.height + 'px';\n\t        f.imageElement.style.left = f.left + 'px';\n\t        f.imageElement.style.top = f.top + 'px';\n\t      });\n\n\t      var canvas = document.createElement('canvas');\n\t      canvas.width = apng.width;\n\t      canvas.height = apng.height;\n\t      canvasDiv.appendChild(canvas);\n\n\t      apng.getPlayer(canvas.getContext('2d')).then(function (p) {\n\t        player = p;\n\t        player.playbackRate = playbackRate;\n\t        var em = player.emit;\n\t        player.emit = function (event) {\n\t          for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n\t            args[_key - 1] = arguments[_key];\n\t          }\n\n\t          log.unshift({ event: event, args: args });\n\t          if (log.length > 10) {\n\t            log.splice(10, log.length - 10);\n\t          }\n\t          logDiv.textContent = log.map(function (_ref) {\n\t            var event = _ref.event,\n\t                args = _ref.args;\n\t            return event + ': ' + JSON.stringify(args);\n\t          }).join(\"\\n\");\n\n\t          em.call.apply(em, [player, event].concat(args));\n\t        };\n\t        player.play();\n\t      });\n\t    });\n\t    resultBlock.classList.remove('hidden');\n\t  };\n\t  reader.readAsArrayBuffer(file);\n\t}\n\n\tfunction emptyEl(el) {\n\t  var c = void 0;\n\t  while ((c = el.firstChild) !== null) {\n\t    el.removeChild(c);\n\t  }\n\t}\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\n\tObject.defineProperty(exports, \"__esModule\", {\n\t    value: true\n\t});\n\texports.isNotPNG = isNotPNG;\n\texports.isNotAPNG = isNotAPNG;\n\texports.default = parseAPNG;\n\n\tvar _crc = __webpack_require__(2);\n\n\tvar _crc2 = _interopRequireDefault(_crc);\n\n\tvar _structs = __webpack_require__(3);\n\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n\tvar errNotPNG = new Error('Not a PNG');\n\tvar errNotAPNG = new Error('Not an animated PNG');\n\n\tfunction isNotPNG(err) {\n\t    return err === errNotPNG;\n\t}\n\tfunction isNotAPNG(err) {\n\t    return err === errNotAPNG;\n\t}\n\n\t// '\\x89PNG\\x0d\\x0a\\x1a\\x0a'\n\tvar PNGSignature = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);\n\n\t/**\n\t * Parse APNG data\n\t * @param {ArrayBuffer} buffer\n\t * @return {APNG|Error}\n\t */\n\tfunction parseAPNG(buffer) {\n\t    var bytes = new Uint8Array(buffer);\n\n\t    if (Array.prototype.some.call(PNGSignature, function (b, i) {\n\t        return b !== bytes[i];\n\t    })) {\n\t        return errNotPNG;\n\t    }\n\n\t    // fast animation test\n\t    var isAnimated = false;\n\t    eachChunk(bytes, function (type) {\n\t        return !(isAnimated = type === 'acTL');\n\t    });\n\t    if (!isAnimated) {\n\t        return errNotAPNG;\n\t    }\n\n\t    var preDataParts = [],\n\t        postDataParts = [];\n\t    var headerDataBytes = null,\n\t        frame = null,\n\t        frameNumber = 0,\n\t        apng = new _structs.APNG();\n\n\t    eachChunk(bytes, function (type, bytes, off, length) {\n\t        var dv = new DataView(bytes.buffer);\n\t        switch (type) {\n\t            case 'IHDR':\n\t                headerDataBytes = bytes.subarray(off + 8, off + 8 + length);\n\t                apng.width = dv.getUint32(off + 8);\n\t                apng.height = dv.getUint32(off + 12);\n\t                break;\n\t            case 'acTL':\n\t                apng.numPlays = dv.getUint32(off + 8 + 4);\n\t                break;\n\t            case 'fcTL':\n\t                if (frame) {\n\t                    apng.frames.push(frame);\n\t                    frameNumber++;\n\t                }\n\t                frame = new _structs.Frame();\n\t                frame.width = dv.getUint32(off + 8 + 4);\n\t                frame.height = dv.getUint32(off + 8 + 8);\n\t                frame.left = dv.getUint32(off + 8 + 12);\n\t                frame.top = dv.getUint32(off + 8 + 16);\n\t                var delayN = dv.getUint16(off + 8 + 20);\n\t                var delayD = dv.getUint16(off + 8 + 22);\n\t                if (delayD === 0) {\n\t                    delayD = 100;\n\t                }\n\t                frame.delay = 1000 * delayN / delayD;\n\t                // https://bugzilla.mozilla.org/show_bug.cgi?id=125137\n\t                // https://bugzilla.mozilla.org/show_bug.cgi?id=139677\n\t                // https://bugzilla.mozilla.org/show_bug.cgi?id=207059\n\t                if (frame.delay <= 10) {\n\t                    frame.delay = 100;\n\t                }\n\t                apng.playTime += frame.delay;\n\t                frame.disposeOp = dv.getUint8(off + 8 + 24);\n\t                frame.blendOp = dv.getUint8(off + 8 + 25);\n\t                frame.dataParts = [];\n\t                if (frameNumber === 0 && frame.disposeOp === 2) {\n\t                    frame.disposeOp = 1;\n\t                }\n\t                break;\n\t            case 'fdAT':\n\t                if (frame) {\n\t                    frame.dataParts.push(bytes.subarray(off + 8 + 4, off + 8 + length));\n\t                }\n\t                break;\n\t            case 'IDAT':\n\t                if (frame) {\n\t                    frame.dataParts.push(bytes.subarray(off + 8, off + 8 + length));\n\t                }\n\t                break;\n\t            case 'IEND':\n\t                postDataParts.push(subBuffer(bytes, off, 12 + length));\n\t                break;\n\t            default:\n\t                preDataParts.push(subBuffer(bytes, off, 12 + length));\n\t        }\n\t    });\n\n\t    if (frame) {\n\t        apng.frames.push(frame);\n\t    }\n\n\t    if (apng.frames.length == 0) {\n\t        return errNotAPNG;\n\t    }\n\n\t    var preBlob = new Blob(preDataParts),\n\t        postBlob = new Blob(postDataParts);\n\n\t    apng.frames.forEach(function (frame) {\n\t        var bb = [];\n\t        bb.push(PNGSignature);\n\t        headerDataBytes.set(makeDWordArray(frame.width), 0);\n\t        headerDataBytes.set(makeDWordArray(frame.height), 4);\n\t        bb.push(makeChunkBytes('IHDR', headerDataBytes));\n\t        bb.push(preBlob);\n\t        frame.dataParts.forEach(function (p) {\n\t            return bb.push(makeChunkBytes('IDAT', p));\n\t        });\n\t        bb.push(postBlob);\n\t        frame.imageData = new Blob(bb, { 'type': 'image/png' });\n\t        delete frame.dataParts;\n\t        bb = null;\n\t    });\n\n\t    return apng;\n\t}\n\n\t/**\n\t * @param {Uint8Array} bytes\n\t * @param {function(string, Uint8Array, int, int): boolean} callback\n\t */\n\tfunction eachChunk(bytes, callback) {\n\t    var dv = new DataView(bytes.buffer);\n\t    var off = 8,\n\t        type = void 0,\n\t        length = void 0,\n\t        res = void 0;\n\t    do {\n\t        length = dv.getUint32(off);\n\t        type = readString(bytes, off + 4, 4);\n\t        res = callback(type, bytes, off, length);\n\t        off += 12 + length;\n\t    } while (res !== false && type != 'IEND' && off < bytes.length);\n\t}\n\n\t/**\n\t *\n\t * @param {Uint8Array} bytes\n\t * @param {number} off\n\t * @param {number} length\n\t * @return {string}\n\t */\n\tfunction readString(bytes, off, length) {\n\t    var chars = Array.prototype.slice.call(bytes.subarray(off, off + length));\n\t    return String.fromCharCode.apply(String, chars);\n\t}\n\n\t/**\n\t *\n\t * @param {string} x\n\t * @return {Uint8Array}\n\t */\n\tfunction makeStringArray(x) {\n\t    var res = new Uint8Array(x.length);\n\t    for (var i = 0; i < x.length; i++) {\n\t        res[i] = x.charCodeAt(i);\n\t    }\n\t    return res;\n\t}\n\n\t/**\n\t * @param {Uint8Array} bytes\n\t * @param {int} start\n\t * @param {int} length\n\t * @return {Uint8Array}\n\t */\n\tfunction subBuffer(bytes, start, length) {\n\t    var a = new Uint8Array(length);\n\t    a.set(bytes.subarray(start, start + length));\n\t    return a;\n\t}\n\n\t/**\n\t * @param {string} type\n\t * @param {Uint8Array} dataBytes\n\t * @return {Uint8Array}\n\t */\n\tvar makeChunkBytes = function makeChunkBytes(type, dataBytes) {\n\t    var crcLen = type.length + dataBytes.length;\n\t    var bytes = new Uint8Array(crcLen + 8);\n\t    var dv = new DataView(bytes.buffer);\n\n\t    dv.setUint32(0, dataBytes.length);\n\t    bytes.set(makeStringArray(type), 4);\n\t    bytes.set(dataBytes, 8);\n\t    var crc = (0, _crc2.default)(bytes, 4, crcLen);\n\t    dv.setUint32(crcLen + 4, crc);\n\t    return bytes;\n\t};\n\n\tvar makeDWordArray = function makeDWordArray(x) {\n\t    return new Uint8Array([x >>> 24 & 0xff, x >>> 16 & 0xff, x >>> 8 & 0xff, x & 0xff]);\n\t};\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports) {\n\n\t\"use strict\";\n\n\tObject.defineProperty(exports, \"__esModule\", {\n\t  value: true\n\t});\n\n\texports.default = function (bytes) {\n\t  var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n\t  var length = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : bytes.length - start;\n\n\t  var crc = -1;\n\t  for (var _i = start, l = start + length; _i < l; _i++) {\n\t    crc = crc >>> 8 ^ table[(crc ^ bytes[_i]) & 0xFF];\n\t  }\n\t  return crc ^ -1;\n\t};\n\n\tvar table = new Uint32Array(256);\n\n\tfor (var i = 0; i < 256; i++) {\n\t  var c = i;\n\t  for (var k = 0; k < 8; k++) {\n\t    c = (c & 1) !== 0 ? 0xEDB88320 ^ c >>> 1 : c >>> 1;\n\t  }\n\t  table[i] = c;\n\t}\n\n\t/**\n\t *\n\t * @param {Uint8Array} bytes\n\t * @param {number} start\n\t * @param {number} length\n\t * @return {number}\n\t */\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\n\tObject.defineProperty(exports, \"__esModule\", {\n\t    value: true\n\t});\n\texports.Frame = exports.APNG = undefined;\n\n\tvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\n\tvar _player = __webpack_require__(4);\n\n\tvar _player2 = _interopRequireDefault(_player);\n\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n\tfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\n\t/**\n\t * @property {number} currFrameNumber\n\t * @property {Frame} currFrame\n\t * @property {boolean} paused\n\t * @property {boolean} ended\n\t */\n\tvar APNG = exports.APNG = function () {\n\t    function APNG() {\n\t        _classCallCheck(this, APNG);\n\n\t        this.width = 0;\n\t        this.height = 0;\n\t        this.numPlays = 0;\n\t        this.playTime = 0;\n\t        this.frames = [];\n\t    }\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {Frame[]} */\n\n\n\t    _createClass(APNG, [{\n\t        key: 'createImages',\n\n\n\t        /**\n\t         *\n\t         * @return {Promise.<*>}\n\t         */\n\t        value: function createImages() {\n\t            return Promise.all(this.frames.map(function (f) {\n\t                return f.createImage();\n\t            }));\n\t        }\n\n\t        /**\n\t         *\n\t         * @param {CanvasRenderingContext2D} context\n\t         * @param {boolean} autoPlay\n\t         * @return {Promise.}\n\t         */\n\n\t    }, {\n\t        key: 'getPlayer',\n\t        value: function getPlayer(context) {\n\t            var _this = this;\n\n\t            var autoPlay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n\n\t            return this.createImages().then(function () {\n\t                return new _player2.default(_this, context, autoPlay);\n\t            });\n\t        }\n\t    }]);\n\n\t    return APNG;\n\t}();\n\n\tvar Frame = exports.Frame = function () {\n\t    function Frame() {\n\t        _classCallCheck(this, Frame);\n\n\t        this.left = 0;\n\t        this.top = 0;\n\t        this.width = 0;\n\t        this.height = 0;\n\t        this.delay = 0;\n\t        this.disposeOp = 0;\n\t        this.blendOp = 0;\n\t        this.imageData = null;\n\t        this.imageElement = null;\n\t    }\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {number} */\n\n\t    /** @type {Blob} */\n\n\t    /** @type {HTMLImageElement} */\n\n\n\t    _createClass(Frame, [{\n\t        key: 'createImage',\n\t        value: function createImage() {\n\t            var _this2 = this;\n\n\t            if (this.imageElement) {\n\t                return Promise.resolve();\n\t            }\n\t            return new Promise(function (resolve, reject) {\n\t                var url = URL.createObjectURL(_this2.imageData);\n\t                _this2.imageElement = document.createElement('img');\n\t                _this2.imageElement.onload = function () {\n\t                    URL.revokeObjectURL(url);\n\t                    resolve();\n\t                };\n\t                _this2.imageElement.onerror = function () {\n\t                    URL.revokeObjectURL(url);\n\t                    _this2.imageElement = null;\n\t                    reject(new Error(\"Image creation error\"));\n\t                };\n\t                _this2.imageElement.src = url;\n\t            });\n\t        }\n\t    }]);\n\n\t    return Frame;\n\t}();\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\n\tObject.defineProperty(exports, \"__esModule\", {\n\t    value: true\n\t});\n\n\tvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\n\tvar _events = __webpack_require__(5);\n\n\tvar _events2 = _interopRequireDefault(_events);\n\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n\tfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\n\tfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\n\tfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n\tvar _class = function (_EventEmitter) {\n\t    _inherits(_class, _EventEmitter);\n\n\t    /**\n\t     * @param {APNG} apng\n\t     * @param {CanvasRenderingContext2D} context\n\t     * @param {boolean} autoPlay\n\t     */\n\n\t    /** @type {number} */\n\n\n\t    /** @type {boolean} */\n\n\t    /** @type {ImageData} */\n\n\n\t    /** @type {APNG} */\n\n\t    /** @type {CanvasRenderingContext2D} */\n\t    function _class(apng, context, autoPlay) {\n\t        _classCallCheck(this, _class);\n\n\t        var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this));\n\n\t        _this.playbackRate = 1.0;\n\t        _this._currentFrameNumber = 0;\n\t        _this._ended = false;\n\t        _this._paused = true;\n\t        _this._numPlays = 0;\n\t        _this._rafId = null;\n\n\t        _this._apng = apng;\n\t        _this.context = context;\n\t        _this.stop();\n\t        if (autoPlay) {\n\t            _this.play();\n\t        }\n\t        return _this;\n\t    }\n\n\t    /**\n\t     *\n\t     * @return {number}\n\t     */\n\n\t    /** @type {number|null} */\n\n\t    /** @type {boolean} */\n\n\t    /** @type {number} */\n\n\t    /** @type {Frame} */\n\n\t    /** @type {number} */\n\n\n\t    _createClass(_class, [{\n\t        key: 'renderNextFrame',\n\t        value: function renderNextFrame() {\n\t            this._currentFrameNumber = (this._currentFrameNumber + 1) % this._apng.frames.length;\n\t            if (this._currentFrameNumber === this._apng.frames.length - 1) {\n\t                this._numPlays++;\n\t                if (this._apng.numPlays !== 0 && this._numPlays >= this._apng.numPlays) {\n\t                    this._ended = true;\n\t                    this._paused = true;\n\t                }\n\t            }\n\n\t            if (this._prevFrame && this._prevFrame.disposeOp == 1) {\n\t                this.context.clearRect(this._prevFrame.left, this._prevFrame.top, this._prevFrame.width, this._prevFrame.height);\n\t            } else if (this._prevFrame && this._prevFrame.disposeOp == 2) {\n\t                this.context.putImageData(this._prevFrameData, this._prevFrame.left, this._prevFrame.top);\n\t            }\n\n\t            var frame = this.currentFrame;\n\t            this._prevFrame = frame;\n\t            this._prevFrameData = null;\n\t            if (frame.disposeOp == 2) {\n\t                this._prevFrameData = this.context.getImageData(frame.left, frame.top, frame.width, frame.height);\n\t            }\n\t            if (frame.blendOp == 0) {\n\t                this.context.clearRect(frame.left, frame.top, frame.width, frame.height);\n\t            }\n\n\t            this.context.drawImage(frame.imageElement, frame.left, frame.top);\n\n\t            this.emit('frame', this._currentFrameNumber);\n\t            if (this._ended) {\n\t                this.emit('end');\n\t            }\n\t        }\n\n\t        // playback\n\n\t    }, {\n\t        key: 'play',\n\t        value: function play() {\n\t            var _this2 = this;\n\n\t            if (this._rafId) {\n\t                cancelAnimationFrame(this._rafId);\n\t            }\n\n\t            this.emit('play');\n\n\t            if (this._ended) {\n\t                this.stop();\n\t            }\n\t            this._paused = false;\n\n\t            var nextRenderTime = performance.now() + this.currentFrame.delay / this.playbackRate;\n\t            var tick = function tick(now) {\n\t                if (_this2._ended || _this2._paused) {\n\t                    return;\n\t                }\n\t                if (now >= nextRenderTime) {\n\t                    while (now - nextRenderTime >= _this2._apng.playTime / _this2.playbackRate) {\n\t                        nextRenderTime += _this2._apng.playTime / _this2.playbackRate;\n\t                        _this2._numPlays++;\n\t                    }\n\t                    do {\n\t                        _this2.renderNextFrame();\n\t                        nextRenderTime += _this2.currentFrame.delay / _this2.playbackRate;\n\t                    } while (!_this2._ended && !_this2._paused && now > nextRenderTime);\n\t                }\n\t                _this2._rafId = requestAnimationFrame(tick);\n\t            };\n\t            this._rafId = requestAnimationFrame(tick);\n\t        }\n\t    }, {\n\t        key: 'pause',\n\t        value: function pause() {\n\t            if (!this._paused) {\n\t                if (this._rafId) {\n\t                    cancelAnimationFrame(this._rafId);\n\t                    this._rafId = null;\n\t                }\n\t                this.emit('pause');\n\t                this._paused = true;\n\t            }\n\t        }\n\t    }, {\n\t        key: 'stop',\n\t        value: function stop() {\n\t            if (this._rafId) {\n\t                cancelAnimationFrame(this._rafId);\n\t                this._rafId = null;\n\t            }\n\t            this.emit('stop');\n\t            this._numPlays = 0;\n\t            this._ended = false;\n\t            this._paused = true;\n\t            // render first frame\n\t            this._currentFrameNumber = -1;\n\t            this.context.clearRect(0, 0, this._apng.width, this._apng.height);\n\t            this.renderNextFrame();\n\t        }\n\t    }, {\n\t        key: 'currentFrameNumber',\n\t        get: function get() {\n\t            return this._currentFrameNumber;\n\t        }\n\n\t        /**\n\t         *\n\t         * @return {Frame}\n\t         */\n\n\t    }, {\n\t        key: 'currentFrame',\n\t        get: function get() {\n\t            return this._apng.frames[this._currentFrameNumber];\n\t        }\n\t    }, {\n\t        key: 'paused',\n\t        get: function get() {\n\t            return this._paused;\n\t        }\n\t    }, {\n\t        key: 'ended',\n\t        get: function get() {\n\t            return this._ended;\n\t        }\n\t    }]);\n\n\t    return _class;\n\t}(_events2.default);\n\n\texports.default = _class;\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports) {\n\n\t// Copyright Joyent, Inc. and other Node contributors.\n\t//\n\t// Permission is hereby granted, free of charge, to any person obtaining a\n\t// copy of this software and associated documentation files (the\n\t// \"Software\"), to deal in the Software without restriction, including\n\t// without limitation the rights to use, copy, modify, merge, publish,\n\t// distribute, sublicense, and/or sell copies of the Software, and to permit\n\t// persons to whom the Software is furnished to do so, subject to the\n\t// following conditions:\n\t//\n\t// The above copyright notice and this permission notice shall be included\n\t// in all copies or substantial portions of the Software.\n\t//\n\t// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n\t// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n\t// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\n\t// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\n\t// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\n\t// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\n\t// USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n\tfunction EventEmitter() {\n\t  this._events = this._events || {};\n\t  this._maxListeners = this._maxListeners || undefined;\n\t}\n\tmodule.exports = EventEmitter;\n\n\t// Backwards-compat with node 0.10.x\n\tEventEmitter.EventEmitter = EventEmitter;\n\n\tEventEmitter.prototype._events = undefined;\n\tEventEmitter.prototype._maxListeners = undefined;\n\n\t// By default EventEmitters will print a warning if more than 10 listeners are\n\t// added to it. This is a useful default which helps finding memory leaks.\n\tEventEmitter.defaultMaxListeners = 10;\n\n\t// Obviously not all Emitters should be limited to 10. This function allows\n\t// that to be increased. Set to zero for unlimited.\n\tEventEmitter.prototype.setMaxListeners = function(n) {\n\t  if (!isNumber(n) || n < 0 || isNaN(n))\n\t    throw TypeError('n must be a positive number');\n\t  this._maxListeners = n;\n\t  return this;\n\t};\n\n\tEventEmitter.prototype.emit = function(type) {\n\t  var er, handler, len, args, i, listeners;\n\n\t  if (!this._events)\n\t    this._events = {};\n\n\t  // If there is no 'error' event listener then throw.\n\t  if (type === 'error') {\n\t    if (!this._events.error ||\n\t        (isObject(this._events.error) && !this._events.error.length)) {\n\t      er = arguments[1];\n\t      if (er instanceof Error) {\n\t        throw er; // Unhandled 'error' event\n\t      } else {\n\t        // At least give some kind of context to the user\n\t        var err = new Error('Uncaught, unspecified \"error\" event. (' + er + ')');\n\t        err.context = er;\n\t        throw err;\n\t      }\n\t    }\n\t  }\n\n\t  handler = this._events[type];\n\n\t  if (isUndefined(handler))\n\t    return false;\n\n\t  if (isFunction(handler)) {\n\t    switch (arguments.length) {\n\t      // fast cases\n\t      case 1:\n\t        handler.call(this);\n\t        break;\n\t      case 2:\n\t        handler.call(this, arguments[1]);\n\t        break;\n\t      case 3:\n\t        handler.call(this, arguments[1], arguments[2]);\n\t        break;\n\t      // slower\n\t      default:\n\t        args = Array.prototype.slice.call(arguments, 1);\n\t        handler.apply(this, args);\n\t    }\n\t  } else if (isObject(handler)) {\n\t    args = Array.prototype.slice.call(arguments, 1);\n\t    listeners = handler.slice();\n\t    len = listeners.length;\n\t    for (i = 0; i < len; i++)\n\t      listeners[i].apply(this, args);\n\t  }\n\n\t  return true;\n\t};\n\n\tEventEmitter.prototype.addListener = function(type, listener) {\n\t  var m;\n\n\t  if (!isFunction(listener))\n\t    throw TypeError('listener must be a function');\n\n\t  if (!this._events)\n\t    this._events = {};\n\n\t  // To avoid recursion in the case that type === \"newListener\"! Before\n\t  // adding it to the listeners, first emit \"newListener\".\n\t  if (this._events.newListener)\n\t    this.emit('newListener', type,\n\t              isFunction(listener.listener) ?\n\t              listener.listener : listener);\n\n\t  if (!this._events[type])\n\t    // Optimize the case of one listener. Don't need the extra array object.\n\t    this._events[type] = listener;\n\t  else if (isObject(this._events[type]))\n\t    // If we've already got an array, just append.\n\t    this._events[type].push(listener);\n\t  else\n\t    // Adding the second element, need to change to array.\n\t    this._events[type] = [this._events[type], listener];\n\n\t  // Check for listener leak\n\t  if (isObject(this._events[type]) && !this._events[type].warned) {\n\t    if (!isUndefined(this._maxListeners)) {\n\t      m = this._maxListeners;\n\t    } else {\n\t      m = EventEmitter.defaultMaxListeners;\n\t    }\n\n\t    if (m && m > 0 && this._events[type].length > m) {\n\t      this._events[type].warned = true;\n\t      console.error('(node) warning: possible EventEmitter memory ' +\n\t                    'leak detected. %d listeners added. ' +\n\t                    'Use emitter.setMaxListeners() to increase limit.',\n\t                    this._events[type].length);\n\t      if (typeof console.trace === 'function') {\n\t        // not supported in IE 10\n\t        console.trace();\n\t      }\n\t    }\n\t  }\n\n\t  return this;\n\t};\n\n\tEventEmitter.prototype.on = EventEmitter.prototype.addListener;\n\n\tEventEmitter.prototype.once = function(type, listener) {\n\t  if (!isFunction(listener))\n\t    throw TypeError('listener must be a function');\n\n\t  var fired = false;\n\n\t  function g() {\n\t    this.removeListener(type, g);\n\n\t    if (!fired) {\n\t      fired = true;\n\t      listener.apply(this, arguments);\n\t    }\n\t  }\n\n\t  g.listener = listener;\n\t  this.on(type, g);\n\n\t  return this;\n\t};\n\n\t// emits a 'removeListener' event iff the listener was removed\n\tEventEmitter.prototype.removeListener = function(type, listener) {\n\t  var list, position, length, i;\n\n\t  if (!isFunction(listener))\n\t    throw TypeError('listener must be a function');\n\n\t  if (!this._events || !this._events[type])\n\t    return this;\n\n\t  list = this._events[type];\n\t  length = list.length;\n\t  position = -1;\n\n\t  if (list === listener ||\n\t      (isFunction(list.listener) && list.listener === listener)) {\n\t    delete this._events[type];\n\t    if (this._events.removeListener)\n\t      this.emit('removeListener', type, listener);\n\n\t  } else if (isObject(list)) {\n\t    for (i = length; i-- > 0;) {\n\t      if (list[i] === listener ||\n\t          (list[i].listener && list[i].listener === listener)) {\n\t        position = i;\n\t        break;\n\t      }\n\t    }\n\n\t    if (position < 0)\n\t      return this;\n\n\t    if (list.length === 1) {\n\t      list.length = 0;\n\t      delete this._events[type];\n\t    } else {\n\t      list.splice(position, 1);\n\t    }\n\n\t    if (this._events.removeListener)\n\t      this.emit('removeListener', type, listener);\n\t  }\n\n\t  return this;\n\t};\n\n\tEventEmitter.prototype.removeAllListeners = function(type) {\n\t  var key, listeners;\n\n\t  if (!this._events)\n\t    return this;\n\n\t  // not listening for removeListener, no need to emit\n\t  if (!this._events.removeListener) {\n\t    if (arguments.length === 0)\n\t      this._events = {};\n\t    else if (this._events[type])\n\t      delete this._events[type];\n\t    return this;\n\t  }\n\n\t  // emit removeListener for all listeners on all events\n\t  if (arguments.length === 0) {\n\t    for (key in this._events) {\n\t      if (key === 'removeListener') continue;\n\t      this.removeAllListeners(key);\n\t    }\n\t    this.removeAllListeners('removeListener');\n\t    this._events = {};\n\t    return this;\n\t  }\n\n\t  listeners = this._events[type];\n\n\t  if (isFunction(listeners)) {\n\t    this.removeListener(type, listeners);\n\t  } else if (listeners) {\n\t    // LIFO order\n\t    while (listeners.length)\n\t      this.removeListener(type, listeners[listeners.length - 1]);\n\t  }\n\t  delete this._events[type];\n\n\t  return this;\n\t};\n\n\tEventEmitter.prototype.listeners = function(type) {\n\t  var ret;\n\t  if (!this._events || !this._events[type])\n\t    ret = [];\n\t  else if (isFunction(this._events[type]))\n\t    ret = [this._events[type]];\n\t  else\n\t    ret = this._events[type].slice();\n\t  return ret;\n\t};\n\n\tEventEmitter.prototype.listenerCount = function(type) {\n\t  if (this._events) {\n\t    var evlistener = this._events[type];\n\n\t    if (isFunction(evlistener))\n\t      return 1;\n\t    else if (evlistener)\n\t      return evlistener.length;\n\t  }\n\t  return 0;\n\t};\n\n\tEventEmitter.listenerCount = function(emitter, type) {\n\t  return emitter.listenerCount(type);\n\t};\n\n\tfunction isFunction(arg) {\n\t  return typeof arg === 'function';\n\t}\n\n\tfunction isNumber(arg) {\n\t  return typeof arg === 'number';\n\t}\n\n\tfunction isObject(arg) {\n\t  return typeof arg === 'object' && arg !== null;\n\t}\n\n\tfunction isUndefined(arg) {\n\t  return arg === void 0;\n\t}\n\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t// style-loader: Adds some css to the DOM by adding a