如何使用 canvas 导出高清晰度视频
您希望将 echarts 生成的动态图表转化为视频,并且提高清晰度。可以使用第三方插件来实现 canvas 导出视频的功能。
导出为视频
- recordrtc.js:使用 html2canvas,支持导出 mp4 格式的视频。
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(); } }); }
登录后复制
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容