\")),e}function h(e,n,t){var r=n?R[n]:t,a=[e.trim()];return e.match(/\\bhljs\\b/)||a.push(\"hljs\"),-1===e.indexOf(r)&&a.push(r),a.join(\" \").trim()}function p(e){var n=i(e);if(!a(n)){var t;E.useBR?(t=document.createElementNS(\"http://www.w3.org/1999/xhtml\",\"div\"),t.innerHTML=e.innerHTML.replace(/\\n/g,\"\").replace(/
\n
\n \n \n"
},
{
"path": "gh-pages/examples.css",
"content": "h3 {\n font-size: 30px;\n line-height: 40px;\n}\ntable.comparisons {\n width: 100%;\n table-layout: fixed;\n text-align: center;\n}\ntable.comparisons td img {\n width: 300px;\n height: 300px;\n}\ntable.comparisons td canvas {\n width: 300px;\n height: 300px;\n}\n@media only screen and (max-device-width: 480px) {\n table.comparisons td img {\n width: 150px;\n height: 150px;\n }\n table.comparisons td canvas {\n width: 150px;\n height: 150px;\n }\n}\n.source {\n font-size: 14px;\n color: #AAA;\n float: right;\n margin-right: 20px;\n margin-bottom: 20px;\n clear: both;\n}\n"
},
{
"path": "gh-pages/examples.html",
"content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n
\n gifler()
\nThis is the main entrypoint to the library.
\nPrepares and sends an XHR request to load the GIF file.
\nReturns a Gif instance for interacting with the library.
\nArguments
\n| url | \nURL to .gif file | \n
Returns
\na Gif instance object
\ngif.animate()
\nAnimates the loaded GIF, drawing each frame into the canvas. This matches the look of an <img> tag.\n
\nArguments
\n| selector | \nA <canvas> element or query selector for a <canvas> element. | \n
gif.frames()
\nRuns the animation on the loaded GIF, but passes the canvas context and GIF frame to the onDrawFrame callback for rendering.\n
\nThis gives you complete control of how the frame is drawn into the canvas context.\n
\nArguments
\n| selector | \nA <canvas> element or query selector for a <canvas> element. | \n
| onDrawFrame | \nA callback that will be invoked when each frame should be drawn into the canvas. see Animator.onDrawFrame. | \n
| setDimesions | \nOPTIONAL. If true, the canvas's width/height will be set to the dimension of the loaded GIF. default: false. | \n
gif.get()
\nTo get even more control, and for your convenience, this method returns a promise that will be fulfilled with an Animator instance. The animator will be in an unstarted state, but can be started with a call to animator.animateInCanvas()\n
\nanimator::createBufferCanvas()
\nCreates a buffer canvas element since it is much faster to call .putImage() than .putImageData().\n
\nThe omggif library decodes the pixels into the full gif dimensions. We only need to store the frame dimensions, so we offset the putImageData call.\n
\nArguments
\n| frame | \nA frame of the GIF (from the omggif library) | \n
| width | \nwidth of the GIF (not the frame) | \n
| height | \nheight of the GIF | \n
Returns
\nA <canvas> element containing the frame's image.
\nanimator.start()
\nStarts running the GIF animation loop.
\nanimator.stop()
\nStops running the GIF animation loop.
\nanimator.reset()
\nResets the animation loop to the first frame.
\nDoes not stop the animation from running.
\nanimator.running()
\nReturns
\nA boolean indicating whether or not the animation is running.
\nanimator.animateInCanvas()
\nThis method prepares the canvas to be drawn into and sets up the callbacks for each frame while the animation is running.\n
\nTo change how each frame is drawn into the canvas, override animator.onDrawFrame() before calling this method. If animator.onDrawFrame() is not set, we simply draw the frame directly into the canvas as is.\n
\nYou may also override animator.onFrame() before calling this method. onFrame handles the lazy construction of canvas buffers for each frame as well as the disposal method for each frame.\n
\nArguments
\n| canvas | \nA canvas element. | \n
| setDimensions | \nOPTIONAL. If true, the canvas width/height will be set to match the GIF. default: true. | \n
\n
\n \n \n"
},
{
"path": "gh-pages/index.css",
"content": ".hero {\n width: 100vw;\n height: 66vh;\n background-color: #490A3D;\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n.hero h1 {\n color: white;\n font-size: 140px;\n line-height: 150px;\n font-weight: 100;\n margin-top: 15px;\n}\n.hero h2 {\n color: rgba(255, 255, 255, 0.5);\n font-size: 20px;\n font-weight: normal;\n}\n.hero .download {\n margin-top: 50px;\n margin-bottom: 15px;\n padding: 0px 0px;\n width: 200px;\n height: 60px;\n line-height: 60px;\n font-size: 24px;\n}\n.canvas-wrapper {\n max-width: 100vw;\n padding: 15px 15px;\n}\n.canvas-wrapper canvas {\n max-width: 100%;\n}\n.canvas-wrapper canvas.rainbow-pikachus {\n width: 100%;\n height: 100px;\n}\npre code {\n padding: 15px 15px !important;\n box-sizing: border-box;\n overflow-x: scroll !important;\n -webkit-touch-callout: text;\n -webkit-user-select: text;\n -khtml-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text;\n}\n.tech-icons {\n font-size: 50px;\n text-align: center;\n margin: 30px 0px;\n color: #AAA;\n}\n.tech-icons span {\n margin: 0px 15px;\n}\n"
},
{
"path": "gh-pages/index.html",
"content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n <img>\n | \n \n <canvas>\n | \n
|---|---|
| \n \n | \n|
| \n Source: http://www.wired.co.uk/ \n \n | \n |
| \n \n | \n|
| \n Source: Florian de Looij \n \n | \n |
| \n \n | \n|
| \n Source: http://www.weshootfood.net/ \n \n | \n |
| \n \n | \n|
| \n Source: David Ope \n \n | \n
\n
\n \n \n"
},
{
"path": "gh-pages/theme.css",
"content": "a,\ndiv {\n box-sizing: border-box;\n}\na {\n text-decoration: none;\n}\nh1,\nh2,\nh3,\nh4 {\n color: black;\n box-sizing: border-box;\n font-weight: 700;\n padding: 0px 0px;\n margin: 0px 0px;\n}\nbody {\n font-family: \"Roboto\";\n text-align: center;\n background: #490A3D;\n color: #555;\n margin: 0;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\nbody > div {\n font-size: 16px;\n line-height: 1em;\n}\n.nav-top {\n width: 100%;\n height: 60px;\n background-color: #BD1550;\n}\n.nav-top .nav-left {\n float: left;\n margin-left: 20px;\n}\n@media only screen and (max-device-width: 400px) {\n .nav-top .nav-left {\n margin-left: 0px;\n }\n}\n.nav-top .nav-right {\n float: right;\n margin-right: 20px;\n}\n@media only screen and (max-device-width: 400px) {\n .nav-top .nav-right {\n display: none;\n }\n}\n.nav-top .devicons {\n font-size: 50px;\n line-height: 60px;\n}\n.nav-top a {\n display: inline-block;\n color: white;\n line-height: 60px;\n height: 60px;\n border-bottom: 5px solid transparent;\n padding: 0px 15px;\n}\n.nav-top a:hover {\n border-bottom-color: #eb4d84;\n}\n.content-row {\n text-align: center;\n background: white;\n}\n.content {\n display: inline-block;\n text-align: left;\n padding: 15px 0px;\n width: 700px;\n max-width: 100vw;\n}\n.content h2 {\n font-size: 40px;\n line-height: 40px;\n padding: 30px 0px 15px 0px;\n}\n.content .flavor {\n font-weight: 300;\n line-height: 1.2em;\n margin-bottom: 2em;\n}\n.block {\n padding-left: 15px;\n padding-right: 15px;\n}\n.button {\n padding: 15px 30px;\n background: #BD1550;\n color: white;\n cursor: pointer;\n display: inline-block;\n}\n.button:hover {\n background: #eb4d84;\n}\n.footer {\n margin: 30px 0px;\n color: #BD1550;\n}\n.footer a {\n color: #BD1550;\n}\n"
},
{
"path": "gifler.bare.js",
"content": "// Generated by CoffeeScript 1.10.0\nvar Animator, Decoder, Gif, GifReader, Promise, gifler,\n bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };\n\nGifReader = require('omggif').GifReader;\n\nPromise = require('bluebird');\n\n\n/*---\nhead : 'gifler()'\ntext :\n - This is the main entrypoint to the library.\n - Prepares and sends an XHR request to load the GIF file.\n - Returns a Gif instance for interacting with the library.\nargs : \n url : 'URL to .gif file'\nreturn : 'a Gif instance object'\n */\n\ngifler = function(url) {\n var aync, promise, xhr;\n xhr = new XMLHttpRequest();\n xhr.open('GET', url, aync = true);\n xhr.responseType = 'arraybuffer';\n promise = new Promise(function(resolve, reject) {\n return xhr.onload = function(e) {\n return resolve(this.response);\n };\n });\n xhr.send();\n return new Gif(promise);\n};\n\nGif = (function() {\n Gif.getCanvasElement = function(selector) {\n var element, ref;\n if (typeof selector === 'string' && ((ref = (element = document.querySelector(selector))) != null ? ref.tagName : void 0) === 'CANVAS') {\n return element;\n } else if ((selector != null ? selector.tagName : void 0) === 'CANVAS') {\n return selector;\n } else {\n throw new Error('Unexpected selector type. Valid types are query-selector-string/canvas-element');\n }\n };\n\n function Gif(dataPromise) {\n this._animatorPromise = dataPromise.then(function(data) {\n var reader;\n reader = new GifReader(new Uint8Array(data));\n return Decoder.decodeFramesAsync(reader).then(function(frames) {\n return new Animator(reader, frames);\n });\n });\n }\n\n\n /*---\n head : 'gif.animate()'\n text :\n - >\n Animates the loaded GIF, drawing each frame into the canvas.\n This matches the look of an <img> tag.\n args : \n selector : 'A \n
\n \n
\n Hello, Gifler!
\nGetting started is easy! Just call the gifler function to load a GIF. Then run the animation in a canvas using the .animate() method. The method .animate() accepts a canvas DOM element or a string selector to a canvas element.\n
\n \n \n
\n \n \n
\n gifler('assets/gif/run.gif').animate('canvas.running-pikachu')\n
\n Custom Rendering
\nGifler makes it easy to manipulate the underlying frames from the GIF. Just call the .frames() method with a canvas selector and a callback that will be called when each frame should be renderd. Gifler handles all the timing calculations and GIF transition logic. Just put the pixels you want to see into the canvas.\n
\n \n \n
\n \n \n
\n var frames = 0;\n\nfunction onDrawFrame(ctx, frame) {\n // Match width/height to remove distortion\n ctx.canvas.width = ctx.canvas.offsetWidth;\n ctx.canvas.height = ctx.canvas.offsetHeight;\n\n // Determine how many pikachus will fit on screen\n var n = Math.floor((ctx.canvas.width)/150)\n\n for(var x = 0; x < n; x++) {\n // Draw a pikachu\n var left = x * 150;\n ctx.globalCompositeOperation = 'source-over';\n ctx.drawImage(frame.buffer, frame.x + left, frame.y, 150, 100);\n\n // Composite a color\n var hue = (frames * 10 + x * 50) % 360;\n ctx.globalCompositeOperation = 'source-atop';\n ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';\n ctx.fillRect(left, 0, 150, this.height);\n }\n frames++;\n}\n\n// Load the GIF, set custom frame render function\ngifler('assets/gif/run.gif')\n .frames('canvas.rainbow-pikachus', onDrawFrame);\n
\n Play/Pause Control
\nWith access to Gifler''s animator, you can stop and start the animation with ease. When running, the animator will automatically compensate for canvas render time when computing when to draw the next GIF frame.
Try clicking the animation below to start/stop it.\n
\n Try clicking the animation below to start/stop it.\n
\n \n
\n \n \n
\n \n gifler('assets/gif/run.gif')\n .animate('canvas.play-pause')\n .then(function(animator) {\n $('canvas.play-pause').click(function(){\n if(animator.running()){\n animator.stop();\n } else {\n animator.start();\n }\n });\n });