如何将引入时间轴自动播放的echarts导出为视频或者gif?

比如下面的自动播放的例子:
https://echarts.apache.org/zh...

要如何将改例子从时间轴头到尾的动态效果,导出为一个视频或者GIF呢?

阅读 160
评论 更新于 3月26日
    1 个回答
    hfhan
    • 10.9k

    这个之前没做过,刚才研究了下,这里使用的案例就是你给的demo,你把echarts的option代码复制到我给的demo里就可以使用了。这里仅以实现功能为主,不考虑兼容性和样式。

    1、导出为gif

    导出gif,可以使用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 type="text/javascript" src="https://cdn.bootcss.com/gif.js/0.2.0/gif.worker.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(){
                    //这里使用requestAnimationFrame,一帧一帧的录制
                    //requestAnimationFrame 添加太多,生成较慢
                    window.requestAnimationFrame(function(){
                    //setTimeout(function(){
                        // 核心方法,向gif中加一帧图像,参数可以是img/canvas元素,还可以从ctx中复制一帧
                        //gif.addFrame($canvas);
                        
                        // or a canvas element
                        gif.addFrame($canvas, {delay: 100});//一帧时长
                        
                        // or copy the pixels from a canvas context
                        //gif.addFrame(ctx, {copy: true});
                        
                        if(Date.now() - start >= time){
                            gif.render();//开始启动 导出gif
                        }else{
                            loop()
                        }
                    //}, 50)//间隔越短,导出时间越长
                    })
                }
                
                //创建一个GIF实例
                var gif = new GIF({
                  workers: 2,//启用两个worker。
                  quality: 10,//图像质量
                  workerScript: './js/gif.worker.js'
                });
                
                gif.on('finished', function(blob) {//最后生成一个blob对象
                      //window.open(URL.createObjectURL(blob));
                      saveAs(blob, "test.gif");
                });
                
                loop()
            }
        </script>
    </body>
    
    </html>

    这里导出的效果,试了下,有点卡顿,而且帧数需要自己控制。另外就是插件需要gif.worker.js,这个文件cdn模式我引入的时候跨域,可能是引入的路径有问题,所以就下载到本地了,你也可以找下有没有国内cdn路径

    2、导出视频

    导出视频使用的是RecordRTC.js插件,这个插件使用了html2canvas,所以还需要引入这个插件

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

    导出为视频还是比较流畅的,但是我比较担心浏览器兼容性和功能限制的问题。

    RecordRTC也支持 导出gif,你可以自己摸索着尝试下,作为学习

    评论 赞赏 3月26日