Need help with this amazing library

[GoChartingAdmin]

Firstly, many thanks for this library. We are planning to use it in our production platform.

https://gocharting.com

The idea is to record the stock chart for a period of time and then create a GIF out of it. It is HTML5 Canvas chart which gets updated with real-time data feeds

While implementing your library I get the below error

Uncaught Invalid code/color length, must be power of 2 and 2 .. 256.

When looked into palette, it was an empty array []

Below is an excerpt of my code

                const width  = 128;
        const height = 128;
        const opts = {
            sampleInt: 1,
            sampleQty: 10,
            loop: 0,
            frameDelay: 10,
            diffMode: 2,
            cropBox: [20, 20, 30, 30],
            quantOpts: {
                method: 1,
            }
        };
        this.encoder = new GIFter(width, height, opts);
        setInterval(videoStart(), 2000);
// Later on click of a button, video is stopped

      videoStart = () => {
        const canvasList = container.getElementsByTagName("canvas");
        this.encoder.addFrame(canvasList[0]);
        console.log("Added Frame")
    }

      videoStop = () => {
               clearInterval(this.timer);
        const img = this.encoder.render();
        console.log(img);
}

[GoChartingAdmin]

Peeling a little deeper, I think the addFrame is not working for my canvas. It is giving a frame32 which is always an array of 0 values

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …]

My canvas that I am passing looks like below

[GoChartingAdmin]

Next I attempted to convert my canvas to png like in the demo and then use your library

function saveForGif(doc, container, encoder) {
    const bgTextNode = container.parentNode.parentNode.querySelector("#bg-text");
    saveAsPng.svgAsDataUri(bgTextNode, {}, function(bgTextUri) {
        // eslint-disable-next-line prefer-const
        let image2 = new Image();
        image2.src = bgTextUri;
        image2.onload = function() {
            saveAsPng.svgAsDataUri(container.getElementsByTagName("svg")[0], {}, function(uri) {
            // eslint-disable-next-line prefer-const
                let image1 = new Image();
                image1.src = uri;
                encoder.addFrame(image1);
            });
        };
    });
}

Please help

[GoChartingAdmin]

Ok, I fixed the addFrame function using some tweaks. I also adjusted the cropBox size as [0,0,600,600]. But the final image has a height of 128 and width of 128. The final gif image looks terrible

data:image/gif;base64,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

[leeoniya]

Hi @GoChartingAdmin,

i'm traveling currently, but i'll look into this in the next few days.

[leeoniya]

Hey @GoChartingAdmin ,

I have some spare cycles to look into this now, but i'll need to be able to reproduce your case first.

Can you give me a data-uri [1] of the canvas(es) you're trying to encode?

[1] https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL