基于echarts图表生成高清晰度视频的方法
本文将探讨如何将基于echarts生成的动态图表(例如支持动态排序的柱状图)转化为高清晰度的视频。直接使用屏幕录制软件往往会造成视频清晰度不足的问题,而echarts使用canvas或svg渲染,这为我们提供了提升清晰度的机会。
问题在于如何利用echarts的canvas渲染特性直接生成视频,而不是依赖屏幕录制。解决方法是使用javascript库来实现视频录制功能。
一种方法是使用recordrtc.js插件。该插件结合html2canvas,可以将canvas内容录制成视频。 需要引入recordrtc.js和html2canvas.js这两个插件。以下代码片段展示了如何使用recordrtc.js将echarts图表录制成mp4视频:
<!doctype html>
<html lang="cmn-hans">
<head>
<meta charset="utf-8">
<meta http-equiv=x-ua-compatible content="ie=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>echarts to video</title>
<style>
html,body,#mycanvas{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="mycanvas"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recordrtc/5.5.9/recordrtc.js"></script>
<script src="https://cdn.bootcss.com/filesaver.js/1.3.8/filesaver.min.js"></script>
<script>
let $parent = document.getelementbyid('mycanvas')
let mychart = echarts.init($parent);
//这里的option就是echrts案例中的option,代码太多,就不贴了
mychart.setoption(option);
settimeout(function(){
//开始录制
exporttovideo(5000)
},500)
function exporttovideo(time){
//time 为录制时长 毫秒
time = time || 0
let $canvas = document.queryselector('#mycanvas canvas')
var recordrtc = recordrtc($canvas, {
type: 'canvas'
});
//开始录制
recordrtc.startrecording();
settimeout(function(){
//录制结束
recordrtc.stoprecording(function(videourl) {
console.log(videourl)
var recordedblob = recordrtc.getblob();
//recordrtc.getdataurl(function(dataurl) { });
saveas(recordedblob, "test.mp4");
});
}, time)
}
</script>
</body>
</html>
如果需要生成gif动画,可以使用gif.js插件。 需要引入gif.js插件。代码片段如下:
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>echarts to gif</title>
<style>
html,body,#myCanvas{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="myCanvas"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/gif.js/0.2.0/gif.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script>
let $parent = document.getElementById('myCanvas')
let myChart = echarts.init($parent);
//这里的option就是echrts案例中的option,代码太多,就不贴了
myChart.setOption( option );
setTimeout(function(){
//开始录制gif
exportToGif(5000)
}, 20)
function exportToGif(time){
var start = Date.now()
//time 为录制时长 毫秒
time = time || 0
let $canvas = document.querySelector('#myCanvas canvas')
function loop(){
window.requestAnimationFrame(function(){
gif.addFrame($canvas, {delay: 100});
if(Date.now() - start >= time){
gif.render();
}else{
loop()
}
})
}
var gif = new GIF({
workers: 2,
quality: 10
});
gif.on('finished', function(blob) {
saveAs(blob, "test.gif");
});
loop()
}
</script>
</body>
</html>
这些代码片段展示了如何使用相应的javascript库来录制视频或gif,从而避免了屏幕录制带来的清晰度问题。 记住,需要根据实际情况调整录制时长以及gif的帧率和质量参数。
以上就是如何用JavaScript高效生成基于ECharts图表的高清视频或GIF动画?的详细内容,更多请关注知识资源分享宝库其它相关文章!
版权声明
本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com
发表评论