[英]How to save canvas animation as gif or webm?
我已经编写了这个函数来捕获GIF的每个帧,但是输出非常滞后并且在数据增加时崩溃。 有什么建议么 ?
代码:
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);
}
在现代浏览器中,您可以使用MediaRecorder API和HTMLCanvasElement.captureStream方法的结合。
MediaRecorder API将能够动态地对视频或音频媒体文件中的MediaStream进行编码,从而产生的内存远远少于获取静止图像时所需的内存。
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>
您还可以使用https://github.com/spite/ccapture.js/捕获到gif或视频。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.