Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The encoding of the Gif fails depending on the size of the canvas #6

Open
mikaa123 opened this issue Jan 14, 2013 · 1 comment
Open

The encoding of the Gif fails depending on the size of the canvas #6

mikaa123 opened this issue Jan 14, 2013 · 1 comment

Comments

@mikaa123
Copy link

Hey there!
Wonderful work, I love using this library. :)
I've been having problems when encoding cavas contexts with very little in them.

Here is an example file:

<!DOCTYPE html>
<html>
    <head>
        <title>Gif testcase</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="LZWEncoder.js"></script>
        <script src="NeuQuant.js"></script>
        <script src="GIFEncoder.js"></script>
    </head>
    <body>
        <canvas id="myCanvas" width="300" height="300"></canvas>
        <script type="text/javascript">
          var myCanvas = document.getElementById('myCanvas');
          var context = myCanvas.getContext('2d');

          context.fillStyle = 'rgb(255,255,255)';
          context.fillRect(0, 0, myCanvas.width, myCanvas.height);

          context.strokeStyle = "#000000";
          context.beginPath();
          context.moveTo(5, 5);
          context.lineTo(5, 30);
          context.stroke();

          var encoder = new GIFEncoder();
          encoder.start();
          encoder.addFrame(context);
          encoder.finish();

          var binary_gif = encoder.stream().getData();
          var data_url = 'data:image/gif;base64,' + window.btoa(binary_gif);
          document.location.href = data_url;
        </script>
    </body>
</html>

This works perfecly. However, if I change the width or height attribute of my canvas, let's say to 250px:

<!DOCTYPE html>
<html>
    <head>
        <title>Gif testcase</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="LZWEncoder.js"></script>
        <script src="NeuQuant.js"></script>
        <script src="GIFEncoder.js"></script>
    </head>
    <body>
        <canvas id="myCanvas" width="250" height="250"></canvas>
        <script type="text/javascript">
          var myCanvas = document.getElementById('myCanvas');
          var context = myCanvas.getContext('2d');

          context.fillStyle = 'rgb(255,255,255)';
          context.fillRect(0, 0, myCanvas.width, myCanvas.height);

          context.strokeStyle = "#000000";
          context.beginPath();
          context.moveTo(5, 5);
          context.lineTo(5, 30);
          context.stroke();

          var encoder = new GIFEncoder();
          encoder.start();
          encoder.addFrame(context);
          encoder.finish();

          var binary_gif = encoder.stream().getData();
          var data_url = 'data:image/gif;base64,' + window.btoa(binary_gif);
          document.location.href = data_url;
        </script>
    </body>
</html>

Then the resulting gif is empty. It is encoded, however there's nothing in it. No line.

Any idea on what the problem could be?
@forresto
Copy link
Contributor

I think that there is a bug in the palette code, as you can see from my comparison here with a photographic example: #3 (comment) ... please share if you find something.

@forresto forresto mentioned this issue May 4, 2013
Open
forresto pushed a commit to forresto/meemoo-canvas2gif that referenced this issue May 12, 2013
expects integer, fixes canvas size bug antimatter15#6
0520e99 
thanks to http://stackoverflow.com/a/16502793/592125
antimatter15 added a commit that referenced this issue May 12, 2013
@antimatter15
Merge pull request #8 from forresto/patch-1
ca8b08c 
expects integer, fixes canvas size bug #6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@forresto @mikaa123