如何使用 Canvas 导出高清晰度视频,将 Echarts 动态图表转化为视频?
如何使用 canvas 导出高清晰度视频
您希望将 echarts 生成的动态图表转化为视频,并且提高清晰度。可以使用第三方插件来实现 canvas 导出视频的功能。
导出为视频
let recordrtc = recordrtc($canvas, { type: 'canvas'});// 开始录制:recordrtc.startrecording();// 停止录制(单位:毫秒):recordrtc.stoprecording(function(videourl) { console.log(videourl);});
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(); } });}