JavaScriptを使用してEchartsチャートに基づいて、高解像度のビデオまたはGIFアニメーションを効率的に生成する方法は？

Echartsチャートに基づいて高解像度ビデオを生成する方法

この記事では、動的並べ替えをサポートするヒストグラムなどのEchartsに基づいて生成された動的チャートを高解像度ビデオに変換する方法について説明します。画面録音ソフトウェアを直接使用すると、ビデオの明確性の問題が不十分な場合が多く、EchartsはキャンバスまたはSVGレンダリングを使用しているため、明確さを改善する機会が提供されます。

問題は、画面の録音に依存する代わりに、EchartsのCanvasレンダリング機能を使用してビデオを直接生成する方法です。解決策は、JavaScriptライブラリを使用してビデオ録画機能を実装することです。

1つの方法は、Recordrtc.jsプラグインを使用することです。このプラグインは、html2canvasを組み合わせてキャンバスコンテンツをビデオに記録します。 2つのプラグイン、RecordRtc.jsとhtml2canvas.jsを紹介する必要があります。次のコードスニペットは、echartsチャートをRecordrtc.jsを使用してMP4ビデオに録画する方法を示しています。

 



    
    <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 {
            高さ：100％;
            幅：100％;
            パディング：0;
            マージン：0;
        }
    </style>



    <div id="mycanvas"> </div>
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"> </script>
     
     
     
    
        $ parent = document.getElementbyid（ 'mycanvas'）
        mychart = echarts.init（$ parent）;
        //ここでのオプションは、ECHRTSケースのオプションです。コードが多すぎるため、mychart.setoption（オプション）を投稿しません。
        
        setimeout（function（）{
            // exporttovideoの記録を開始（5000）
        }、500）
        
        関数exporttovideo（時間）{
            //時間は記録時間ミリ秒時間=時間||です0
            
            $ canvas = document.queryselector（ '＃mycanvas canvas'）
            
            var recordrtc = recordrtc（$ canvas、{
                タイプ：「キャンバス」
            }）;
            // recordrtc.startrecording（）の記録を開始します。
            
            setimeout（function（）{
                // RecordRtc.StopRecording（funcerl）{recordrtc.StopRecording {
                    console.log（videourl）
                
                    var RecordedBlob = RecordRtc.getBlob（）;
                    //RECORDRTC.GETDATAURL(Function(Dataurl）{}）;
                    Saveas（RecordedBlob、 "test.mp4"）;
                }）;
            }、 時間）
        }
    

GIFアニメーションを生成する必要がある場合は、gif.jsプラグインを使用できます。 gif.jsプラグインを紹介する必要があります。コードスニペットは次のとおりです。

 



    
    <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 {
            高さ：100％;
            幅：100％;
            パディング：0;
            マージン：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>
     
    
        $ parent = document.getElementbyid（ 'mycanvas'）
        mychart = echarts.init（$ parent）;

        //ここでのオプションは、ECHRTSケースのオプションです。コードが多すぎるため、mychart.setoption（オプション）を投稿しません。
        
        setimeout（function（）{
            // GIFの記録を開始します
            exporttogif（5000）
        }、20）
        
        関数exporttogif（time）{
            var start = date.now（）
            //時間は記録時間ミリ秒時間=時間||です0
            
            $ canvas = document.queryselector（ '＃mycanvas canvas'）
            
            function loop（）{
                window.requestanimationframe（function（）{
                    gif.addframe（$ canvas、{delay：100}）;
                    if（date.now（） -  start> = time）{
                        gif.render（）;
                    }それ以外{
                        ループ（）
                    }
                }）
            }
            
            var gif = new Gif（{
              労働者：2、
              品質：10
            }）;
            
            gif.on（ 'finite'、function（blob）{
                  Saveas（blob、 "test.gif"）;
            }）;
            
            ループ（）
        }
    

これらのスニペットは、対応するJavaScriptライブラリを使用してビデオやGIFを録画する方法を示しているため、画面録画によって引き起こされる明確な問題を回避します。実際の状況に応じて、GIFの記録時間とフレームレートと品質パラメーターを調整する必要があることを忘れないでください。

以上がJavaScriptを使用してEchartsチャートに基づいて、高解像度のビデオまたはGIFアニメーションを効率的に生成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。