How to efficiently generate high-definition video or GIF animation based on ECharts charts using JavaScript?

Methods for generating high-definition videos based on echarts charts

This article will explore how to convert dynamic charts generated based on echarts, such as histograms that support dynamic sorting, into high-definition videos. Direct use of screen recording software often causes insufficient video clarity issues, while echarts uses canvas or svg rendering, which provides us with an opportunity to improve clarity.

The problem is how to directly generate videos using echarts' canvas rendering features instead of relying on screen recording. The solution is to use the javascript library to implement the video recording function.

One way is to use the recordrtc.js plugin. This plugin combines html2canvas to record canvas content into video. The two plugins, recordrtc.js and html2canvas.js, need to be introduced. The following code snippet shows how to record an echarts chart into an mp4 video using recordrtc.js:

 



    <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>



    <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(&#39;mycanvas&#39;)
        let mychart = echarts.init($parent);
        //The option here is the option in the echrts case. There are too many codes, so I won’t post mychart.setoption(option);
        
        settimeout(function(){
            //Start recording exporttovideo(5000)
        },500)
        
        function exporttovideo(time){
            //time is the recording time milliseconds time = time || 0
            
            let $canvas = document.queryselector(&#39;#mycanvas canvas&#39;)
            
            var recordrtc = recordrtc($canvas, {
                type: &#39;canvas&#39;
            });
            //Start recording recordrtc.startrecording();
            
            settimeout(function(){
                //Record end recordrtc.stoprecording(function(videourl) {
                    console.log(videourl)
                
                    var recordedblob = recordrtc.getblob();
                    //recordrtc.getdataurl(function(dataurl) { });
                    saveas(recordedblob, "test.mp4");
                });
            }, time)
        }
    </script>

If you need to generate gif animations, you can use the gif.js plugin. Need to introduce the gif.js plugin. The code snippet is as follows:

 



    <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>



    <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(&#39;myCanvas&#39;)
        let myChart = echarts.init($parent);

        //The option here is the option in the echrts case. There are too many codes, so I won’t post myChart.setOption( option);
        
        setTimeout(function(){
            //Start recording gif
            exportToGif(5000)
        }, 20)
        
        function exportToGif(time){
            var start = Date.now()
            //time is the recording time milliseconds time = time || 0
            
            let $canvas = document.querySelector(&#39;#myCanvas canvas&#39;)
            
            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(&#39;finished&#39;, function(blob) {
                  saveAs(blob, "test.gif");
            });
            
            loop()
        }
    </script>

These snippets show how to use the corresponding javascript library to record videos or gifs, thus avoiding the clarity issues caused by screen recording. Remember, you need to adjust the recording time and the frame rate and quality parameters of the gif according to the actual situation.

The above is the detailed content of How to efficiently generate high-definition video or GIF animation based on ECharts charts using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!