如何将画布动画另存为gif或webm？ [英] How to save canvas animation as gif or webm?

问题描述

我已经编写了此功能来捕获GIF的每个帧，但是输出非常缓慢，并且在数据增加时崩溃。有什么建议吗？

代码：

 函数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 =文件名; 
 a.href =图片; 
 a。 click（）; 
 a.remove（）; 
} 
}）; 
} 
 ////////////////////////////////////////// ////////////////////////////// 
 
函数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> = frameCount）{
 clearInterval（interval）; 
 if（！保存）{
 createGifFromPng（listImgs，framerate，fileName，gifScale）; 
 Saving = true; 
} 
} 
 else {
 listImgs.push（URL.createObjectURL（b））; 
} 
}，'image / gif'）; 
}，1000 /帧率） ; 
} 
  

解决方案

在现代浏览器中，您可以使用 MediaRecorder API 和 HTMLCanvasElement.captureStream 方法。

MediaRecorder API将能够动态地在视频或音频媒体文件中对MediaStream进行编码，从而比捕获静态图像所需的内存少得多。

< pre class = snippet-code-js lang-js prettyprint-override> const ctx = canvas.getContext（'2d'）; var x = 0; anim（）; startRecording（）; function startRecording （）{const chunks = []; //这里，我们将存储记录的媒体块（Blob）const stream = canvas.captureStream（）; //抓取我们的画布MediaStream const rec = new MediaRecorder（stream）; //初始化记录器//每次记录器有新数据时，我们都会将其存储在数组rec.ondataavailable = e =>中。 chunks.push（e.data）; //仅当记录器停止时，我们才从所有块中构造一个完整的Blob rec.onstop = e => exportVid（新Blob（块，{type：‘video / webm’}）））; rec.start（）; setTimeout（（）=> rec.stop（），3000）; //停止以3s录制}}函数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 =下载视频； document.body.appendChild（a）;} function anim（）{x =（x +1）％canvas.width; ctx.fillStyle =‘白色’； ctx.fillRect（0,0，canvas.width，canvas.height）; ctx.fillStyle ='黑色'; ctx.fillRect（x-20，0，40，40）; requestAnimationFrame（anim）;}

 < canvas id = canvas>< / canvas>  

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);
        }

解决方案

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>

这篇关于如何将画布动画另存为gif或webm？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！