PHP前端开发

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

百变鹏仔 3周前 (11-26) #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();        }    });}