如何使用 canvas 导出高清晰度视频
您希望将 echarts 生成的动态图表转化为视频，并且提高清晰度。可以使用第三方插件来实现 canvas 导出视频的功能。
导出为视频
recordrtc.js：使用 html2canvas，支持导出 mp4 格式的视频。
let recordrtc = recordrtc($canvas, { type: 'canvas'});// 开始录制：recordrtc.startrecording();// 停止录制（单位：毫秒）：recordrtc.stoprecording(function(videourl) { console.log(videourl);});
登录后复制导出为 gifgif.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(); } });}
登录后复制
以上就是如何使用 Canvas 导出高清晰度视频，将 Echarts 动态图表转化为视频？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2849380.html
