How to save canvas animation as gif or webm?

Question

i have written this function to capture each frame for the GIF but the output is very laggy and crashes when the data increases. Any suggestions ?

Code :

    function createGifFromPng(list, framerate, fileName, gifScale) {
            gifshot.createGIF({
                'images': list,
                'gifWidth': wWidth * gifScale,
                'gifHeight': wHeight * gifScale,
                'interval': 1 / framerate,
            }, function(obj) {
                if (!obj.error) {
                    var image = obj.image;
                    var a = document.createElement('a');
                    document.body.append(a);
                    a.download = fileName;
                    a.href = image;
                    a.click();
                    a.remove();
                }
            });
        }
/////////////////////////////////////////////////////////////////////////

function getGifFromCanvas(renderer, sprite, fileName, gifScale, framesCount, framerate) {
            var listImgs = [];
            var saving = false;
            var interval = setInterval(function() {
                renderer.extract.canvas(sprite).toBlob(function(b) {
                    if (listImgs.length >= framesCount) {
                        clearInterval(interval);
                        if (!saving) {
                        createGifFromPng(listImgs, framerate, fileName,gifScale);
                            saving = true;
                        }
                    }
                    else {
                        listImgs.push(URL.createObjectURL(b));
                    }
                }, 'image/gif');
            }, 1000 / framerate);
        }

Answer 1

In modern browsers you can use a conjunction of the MediaRecorder API and the HTMLCanvasElement.captureStream method.

The MediaRecorder API will be able to encode a MediaStream in a video or audio media file on the fly, resulting in far less memory needed than when you grab still images.

 const ctx = canvas.getContext('2d'); var x = 0; anim(); startRecording(); function startRecording() { const chunks = []; // here we will store our recorded media chunks (Blobs) const stream = canvas.captureStream(); // grab our canvas MediaStream const rec = new MediaRecorder(stream); // init the recorder // every time the recorder has new data, we will store it in our array rec.ondataavailable = e => chunks.push(e.data); // only when the recorder stops, we construct a complete Blob from all the chunks rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'})); rec.start(); setTimeout(()=>rec.stop(), 3000); // stop recording in 3s } function exportVid(blob) { const vid = document.createElement('video'); vid.src = URL.createObjectURL(blob); vid.controls = true; document.body.appendChild(vid); const a = document.createElement('a'); a.download = 'myvid.webm'; a.href = vid.src; a.textContent = 'download the video'; document.body.appendChild(a); } function anim(){ x = (x + 1) % canvas.width; ctx.fillStyle = 'white'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle = 'black'; ctx.fillRect(x - 20, 0, 40, 40); requestAnimationFrame(anim); } 

 <canvas id="canvas"></canvas> 

Answer 2

您还可以使用https://github.com/spite/ccapture.js/捕获到gif或视频。