GIF almost empty

[dronkit]

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]

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]

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]

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]

@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.