如何将画布动画另存为gif或webm？

本文介绍了如何将画布动画另存为gif或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进行编码，从而比捕获静态图像所需的内存少得多。

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>