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.

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

GIF almost empty #23

Open
dronkit opened this issue Nov 8, 2014 · 4 comments
Open

GIF almost empty #23

dronkit opened this issue Nov 8, 2014 · 4 comments

Comments

@dronkit
Copy link

dronkit commented Nov 8, 2014

All I get is 7 bytes of data in encoder.stream().getData()
and those bytes, encoded in base64, are R0lGODlhOw==

Can please anyone help me? I need these project to work ASAP! I'm desperate! Thanks!

The script that generates all is pretty long, i'm pasting some pieces I think may be relevant, thought i think I followed the instructions to the letter, more or less.

    //draw trajectory
    ctx.lineTo(satellite.x,satellite.y);
    ctx.stroke();

    //agrega frame al gif
    if (recording)
    {
        encoder.addFrame(ctx);
        console.log('grabado frame '+steps);
    }

ctx is the canvas context. I has a white filling and the contents are few: a svg and a polligonal line (the "trajectory"). The only difference I noticed with the example file is that the example doesn't do ctx.stroke().
And the finishing code:

encoder.finish();
var binary_gif = encoder.stream().getData();
console.log(binary_gif.length+' bytes'); //gives 7
var data_url = 'data:image/gif;base64,'+btoa(binary_gif);
console.log(data_url); //gives the header and the bas64 i told you
@dronkit
Copy link
Author

dronkit commented Nov 9, 2014

OK, sorry, no, that doesn't work either.
This is the issue:
I load a svg into the ctx canvas.

//load planet image
planet.ready = false;
planet.image = new Image();
planet.image.onload = function () {
planet.ready = true;
};

This is the code that initializes the drawing and draws the image into the canvas

//draw planet
    if (planet.ready)
    {
        ctx.drawImage(planet.image, planet.x-planet.r, planet.y-planet.r,planet.r*2,planet.r*2);
    }
    else
    {
    alert('Image not loaded');
    ctx.arc(planet.x,planet.y,planet.r,0,Math.PI*2);
    ctx.fill();
    }
    //trajectory drawing start
    ctx.strokeStyle="#FF0000";
    ctx.beginPath();
    ctx.moveTo(satellite.x,satellite.y);

At first my program doesn't load it I don't know why, so the svg isnt loaded into the canvas and the circle is drawn instead. In that case the gif recording works fine.
After a second if I hit my "reset" button the svg is loaded and everything is redrawn, with svg into the canvas. Then the gif recording fails.

Already tested and the issue isn't with the transformations or the lack of setSize.

@dronkit
Copy link
Author

dronkit commented Nov 9, 2014

Aaaand... I got the workoround and the possible problem. The scripts and the SVG are in a folder in the local disk. If you try to do a getImage on a canvas that has an image from a different domain, Chrome gives security error. Also, all local files (file://) are treated as external, so, getImage has that error. Jsgif has a getImage for the passed canvas context and is probably hitting that error. Problem is the whole procedure is in a try-catch block so we don't get to know what's going on.
A workaround is to run chrome.exe --allow-file-access-from-files

@mpohl100
Copy link

mpohl100 commented May 5, 2018

Maybe my pull request might be worth a try.
#34

By default the sampling factor is 10 which means not all pixels serve as input for the neural net in NeuQuant.js. This way pixel colours can be lost. Setting it to 1 will ensure that the network is learning from every pixel

@joshi1983
Copy link

@mpohl100 setQuality(10) on your encoder would set the sampling factor to 10 instead of 1. Doing that should be less disruptive for anyone upgrading jsgif for projects that rely on the default of 1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants