基于echarts圖表生成高清晰度視頻的方法

本文將探討如何將基于echarts生成的動(dòng)態(tài)圖表（例如支持動(dòng)態(tài)排序的柱狀圖）轉(zhuǎn)化為高清晰度的視頻。直接使用屏幕錄制軟件往往會(huì)造成視頻清晰度不足的問(wèn)題，而echarts使用canvas或svg渲染，這為我們提供了提升清晰度的機(jī)會(huì)。

問(wèn)題在于如何利用echarts的canvas渲染特性直接生成視頻，而不是依賴屏幕錄制。解決方法是使用javascript庫(kù)來(lái)實(shí)現(xiàn)視頻錄制功能。

一種方法是使用recordrtc.js插件。該插件結(jié)合html2canvas，可以將canvas內(nèi)容錄制成視頻。 需要引入recordrtc.js和html2canvas.js這兩個(gè)插件。以下代碼片段展示了如何使用recordrtc.js將echarts圖表錄制成mp4視頻：

    <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('mycanvas')
        let mychart = echarts.init($parent);
        //這里的option就是echrts案例中的option，代碼太多，就不貼了
        mychart.setoption(option);
        
        settimeout(function(){
            //開(kāi)始錄制
            exporttovideo(5000)
        },500)
        
        function exporttovideo(time){
            //time 為錄制時(shí)長(zhǎng) 毫秒
            time = time || 0
            
            let $canvas = document.queryselector('#mycanvas canvas')
            
            var recordrtc = recordrtc($canvas, {
                type: 'canvas'
            });
            //開(kāi)始錄制
            recordrtc.startrecording();
            
            settimeout(function(){
                //錄制結(jié)束
                recordrtc.stoprecording(function(videourl) {
                    console.log(videourl)
                
                    var recordedblob = recordrtc.getblob();
                    //recordrtc.getdataurl(function(dataurl) { });
                    saveas(recordedblob, "test.mp4");
                });
            }, time)
        }
    </script>

如果需要生成gif動(dòng)畫(huà)，可以使用gif.js插件。 需要引入gif.js插件。代碼片段如下：

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

        //這里的option就是echrts案例中的option，代碼太多，就不貼了
        myChart.setOption( option );
        
        setTimeout(function(){
            //開(kāi)始錄制gif
            exportToGif(5000)
        }, 20)
        
        function exportToGif(time){
            var start = Date.now()
            //time 為錄制時(shí)長(zhǎng) 毫秒
            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>

這些代碼片段展示了如何使用相應(yīng)的javascript庫(kù)來(lái)錄制視頻或gif，從而避免了屏幕錄制帶來(lái)的清晰度問(wèn)題。 記住，需要根據(jù)實(shí)際情況調(diào)整錄制時(shí)長(zhǎng)以及gif的幀率和質(zhì)量參數(shù)。

以上是如何用JavaScript高效生成基于ECharts圖表的高清視頻或GIF動(dòng)畫(huà)？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！