This is a tool used for extracting frames from an HTML5 video element and creating a frame-by-frame player in HTML5 Canvas with some extra tools. This is meant to be used for animated charts or other data-driven gifs to allow for frame-by-frame analysis as well as easy-to-use variable playback speeds. Written as a side-project to learn ES6.
Simply, put, it finds a HTML5 video version of the GIF source and extracts frames by playing the videowhile taking snapshots via HTML5 canvas's toDataUrl method. Playback is then performed by looping through the array of images and drawing them back to canvas via the drawImage method.
There are several options:
- Clone this repository and open the index.html file.
- Visit http://morrow.github.io/gif-viewer and enter a URL.
- Append an imgur or gfycat GIF link to http://morrow.github.io/gif-viewer/#/insert-url-here
Most of these examples came from /r/dataisbeautiful, which is a great resource for informative data-driven images and videos.
- 1933 to 2100 USA Age Distribution - credit: StephenHolzman
- Taxi pickups in NYC by hour and trip length - credit: fhoffa
- The shortest path through the 48 continental state capitals - credit: indeddit
- Animated map showing US obesity levels, 1985-2010 [CDC] - credit: zipzopzoobitybop
- Animated Baseball Stats - credit: crivexp2
MIT License (MIT) Copyright (c) 2015 Terry Morrow