问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
船到桥头自然直
    18210122184

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

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

    echarts
    阅读 8.1k
    1 个回答
    得票最新
    头像
    hfhan
      29k72241

      这个之前没做过，刚才研究了下，这里使用的案例就是你给的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，你可以自己摸索着尝试下，作为学习

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      被 1 篇内容引用
      推荐问题