我正在尝试使用 Canvas 创建一些动画,并使用RecordRTC将其保存为视频文件。 ,这段代码工作完美,但我在获取带有图像的 div 进行记录时遇到困难。
<div style="display:none;" id="background_goa">
<img src="Http://domain/wp-content/themes/custom/images/top10-bg-goa.png'; ?>" />
</div>
function video_create(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
ctx.clearRect(0, 0, 150, 150);
var img = document.getElementById("background_goa");
ctx.drawImage(img,100,100);
// ctx.restore();
window.requestAnimationFrame(top_video_create);
}
window.requestAnimationFrame(top_video_create);
var recorder = RecordRTC(canvas, {
type: 'canvas'
});
recorder.startRecording();
setTimeout(function(){
recorder.stopRecording(function() {
var blob = recorder.getBlob();
document.body.innerHTML = '<video controls src="' + URL.createObjectURL(blob) + '" autoplay loop></video>';
});
}, 5000);
最佳答案
错误是使用了 ctx.restore();基本上它的作用是在绘制后恢复整个 Canvas ,它应该在将新元素绘制到 Canvas 之前使用,以便在加载下一帧之前屏幕是空白的。
关于javascript - 使用 recordrtc 将 Canvas 图像录制到视频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44750185/