如何使用 Canvas 导出高清晰度视频,将 Echarts 动态图表转化为视频?

如何使用 Canvas 导出高清晰度视频,将 Echarts 动态图表转化为视频?

如何使用 canvas 导出高清晰度视频

您希望将 echarts 生成的动态图表转化为视频,并且提高清晰度。可以使用第三方插件来实现 canvas 导出视频的功能。

导出为视频

  • recordrtc.js:使用 html2canvas,支持导出 mp4 格式的视频。
let recordrtc = recordrtc($canvas, {     type: 'canvas' }); // 开始录制: recordrtc.startrecording(); // 停止录制(单位:毫秒): recordrtc.stoprecording(function(videourl) {     console.log(videourl); });
登录后复制
  • 导出为 gif
  • gif.js:逐帧录制 canvas,支持导出 gif 格式的视频。
var gif = new GIF({     quality: 10,     workerScript: './js/gif.worker.js' });  gif.on('finished', function(blob) {     saveAs(blob, "test.gif"); });  // 一帧一帧录制: function loop() {     requestAnimationFrame(function() {         gif.addFrame($canvas, {delay: 100});         if (Date.now() - start >= time) {             gif.render();         } else {             loop();         }     }); }
登录后复制

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容