repl.it
@paulfears/

gifler

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • assets
  • site
  • src
  • docs.css
  • docs.html
  • examples.css
  • examples.html
  • gifler.bare.js
  • gifler.bundle.js
  • gifler.min.js
  • index.css
  • metalsmith.json
  • package.json
  • README.md
  • theme.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css">
    <link rel="stylesheet" href="assets/lib/monokai_sublime.css">
    <link rel="stylesheet" href="theme.css">
    <link rel="stylesheet" href="index.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="assets/gifler.js"></script>
    <script type="text/javascript" src="assets/lib/highlight.pack.js"></script>
    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
    <script src="gifler.bare.js"></script>
  </head>
  <body>
    <div class="nav-top row">
      <div class="nav-left"><a href="./">Gifler</a><a href="examples.html">examples</a><a href="docs.html">docs</a></div>
      <div class="nav-right"><a href="https://github.com/themadcreator/gifler"><span class="devicons devicons-github_full"></span></a><a href="https://www.npmjs.com/package/gifler"><span class="devicons devicons-npm"></span></a></div>
    </div>
    <div class="hero row">
      <h1>Gifler</h1>
      <h2>Render GIF frames to &lt;canvas&gt;</h2><a href="https://raw.githubusercontent.com/themadcreator/gifler/master/gifler.min.js">
        <div class="button download">Download</div></a>
    </div>
    <div class="content-row row">
      <div class="content">
        <div class="block">
          <h2>Hello, Gifler!</h2>
          <div class="flavor">Getting started is easy! Just call the gifler function to load a GIF. Then run the animation in a canvas using the <b>.animate()</b> method. The method <b>.animate()</b> accepts a canvas DOM element or a string selector to a canvas element.
</div>
        </div>
        <div class="canvas-wrapper">
          <canvas class="running-pikachu"></canvas>
        </div>
        <script>gifler('assets/gif/run.gif').animate('canvas.running-pikachu')</script>
        <div class="block">
          <pre><code class="running-pikachu javascript">gifler('assets/gif/run.gif').animate('canvas.running-pikachu')</code></pre>
        </div>
        <div class="block">
          <h2>Custom Rendering</h2>
          <div class="flavor">Gifler makes it easy to manipulate the underlying frames from the GIF. Just call the <b>.frames()</b> 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.
</div>
        </div>
        <div class="canvas-wrapper">
          <canvas class="rainbow-pikachus"></canvas>
        </div>
        <script>var frames = 0;

function onDrawFrame(ctx, frame) {
  // Match width/height to remove distortion
  ctx.canvas.width  = ctx.canvas.offsetWidth;
  ctx.canvas.height = ctx.canvas.offsetHeight;
  //console.log(frame);

  // Determine how many pikachus will fit on screen
  var n = Math.floor((ctx.canvas.width)/150)

  for(var x = 0; x < n; x++) {
    // Draw a pikachu
    var left = x * 150;
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(frame.buffer, frame.x + left, frame.y, 150, 100);

    // Composite a color
    var hue = (frames * 10 + x * 50) % 360;
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';
    ctx.fillRect(left, 0, 150, this.height);
  }
  //frames++;
}

// Load the GIF, set custom frame render function
console.log(get_frames('assets/gif/run.gif'));
gifler('assets/gif/run.gif')
  .frames('canvas.rainbow-pikachus', onDrawFrame);</script>
        <div class="block">
          <pre><code class="rainbow-pikachus javascript">var frames = 0;

function onDrawFrame(ctx, frame) {
  // Match width/height to remove distortion
  ctx.canvas.width  = ctx.canvas.offsetWidth;
  ctx.canvas.height = ctx.canvas.offsetHeight;

  // Determine how many pikachus will fit on screen
  var n = Math.floor((ctx.canvas.width)/150)

  for(var x = 0; x &lt; n; x++) {
    // Draw a pikachu
    var left = x * 150;
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(frame.buffer, frame.x + left, frame.y, 150, 100);

    // Composite a color
    var hue = (frames * 10 + x * 50) % 360;
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';
    ctx.fillRect(left, 0, 150, this.height);
  }
  frames++;
}

// Load the GIF, set custom frame render function
gifler('assets/gif/run.gif')
  .frames('canvas.rainbow-pikachus', onDrawFrame);</code></pre>
        </div>
        <div class="block">
          <h2>Play/Pause Control</h2>
          <div class="flavor">With 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. <br/><br/> Try clicking the animation below to start/stop it.
</div>
        </div>
        <div class="canvas-wrapper">
          <canvas class="play-pause"></canvas>
        </div>
        <script>gifler('assets/gif/run.gif')
  .animate('canvas.play-pause')
  .then(function(animator) {
    $('canvas.play-pause').click(function(){
      if(animator.running()){
        animator.stop();
      } else {
        animator.start();
      }
    });
  });</script>
        <div class="block">
          <pre><code class="play-pause javascript">gifler('assets/gif/run.gif')
  .animate('canvas.play-pause')
  .then(function(animator) {
    $('canvas.play-pause').click(function(){
      if(animator.running()){
        animator.stop();
      } else {
        animator.start();
      }
    });
  });</code></pre>
        </div>
        <div class="tech-icons"><span title="CoffeeScript" class="devicons devicons-coffeescript"></span><span title="Javascript" class="devicons devicons-javascript_badge"></span><span title="less" class="devicons devicons-less"></span><span title="npm" class="devicons devicons-npm"></span></div>
      </div>
    </div>
    <div class="footer">made by <a href="https://github.com/themadcreator/">[email protected]</a></div>
  </body>
</html>
result
console