html5-canvas - 以 60 fps 从画布捕获帧
问题描述
大家好,所以我有一个画布,我可以在上面写一个相当复杂的动画。假设我想以每秒 60 帧的速度截取画布的屏幕截图。画布不必实时播放,我只需要每秒捕获 60 帧,这样我就可以将屏幕截图发送到 FFmpeg 并制作视频。我知道我可以使用canvas.toDataURL
,但如何顺利捕捉帧?
解决方案
如果您将 lottie-web 用于浏览器中的后期效果内容,请使用此代码暂停视频和 lottie 动画。比截屏并使用 Whammy 编译一个 webm 文件,您可以通过 ffmpeg 运行该文件以获得所需的输出。
generateVideo(){
const vid = new Whammy.fromImageArray(this.captures, 30);
vid.name = "project_id_238.webm";
vid.lastModifiedDate = new Date();
this.file = URL.createObjectURL(vid);
},
async pauseAll(){
this.pauseVideo();
if(this.animations.length){
this.pauseLotties()
}
this.captures.push(this.canvas.toDataURL('image/webp'));
if(!this.ended){
setTimeout(()=>{
this.pauseAll();
}, 500);
}
},
async pauseVideo(){
console.log("curretTime",this.video.currentTime);
console.log("duration", this.video.duration);
this.video.pause();
const oneFrame = 1/30;
this.video.currentTime += oneFrame;
},
async pauseLotties(){
lottie.freeze();
for(let i =0; i<this.animations.length; i++){
let step =0;
let animation = this.animations[i].lottie;
if(animation.currentFrame<=animation.totalFrames){
step = animation.currentFrame + animation.totalFrames/30;
}
lottie.goToAndStop(step, true, animation.name);
}
}
推荐阅读
- vagrant - 带有 Vagrant 的 XDebug 的 PhpStorm 映射
- python - 在python wx.ListCtrl中粘贴excel数据
- javascript - 单击复选框以自动选择相应的选项
- direct2d - DirectWrite 空间字符换行
- email - 如何在运行时通过变量在 jenkins 中传递电子邮件
- c# - 如何在c#中创建组框元素单击Listner
- java - 在netty中,多播上的双向通信必须创建2个引导程序是否正常?
- python - 检查用户是否是作者
- excel - 在我的编码 Excel VBA 中标准化并减少重复相同的过程
- ignite - 如何监控网格中的服务?