如何导出带有延迟动画的Chart.js柱状图表为视频？

针对你带延迟动画的Chart.js柱状图，完全可以将其动画导出为视频，以下是几种实用的实现方法：

一、简易方案：浏览器内置录屏工具 #

这是最快上手的方法，无需额外代码：

• 固定图表尺寸：避免动画过程中图表响应式变形，可临时给canvas元素添加固定宽高的CSS样式，或修改Chart配置里的maintainAspectRatio为true并设置固定尺寸。
• 启动录屏：使用浏览器自带的屏幕录制功能（如Chrome：右上角菜单→更多工具→屏幕录制；Firefox：开发者工具→性能→录制），或系统级录屏工具（如Windows Xbox录屏、Mac QuickTime Player）。
• 触发动画：刷新页面或调用followerGrowthChart.update()重新触发柱状图的延迟动画，完成录制后导出视频即可。

二、编程式方案：Canvas帧捕获+MediaRecorder合成视频 #

适合需要自动化导出或批量处理的场景，利用浏览器原生API实现：

步骤1：添加帧捕获与录制逻辑 #

修改你的Chart.js配置，加入动画过程中的帧捕获和视频录制代码：

// 初始化录制相关变量
let mediaRecorder = null;
const canvas = document.getElementById('followerGrowthChart');
let delayed = false; // 补全delayed变量声明

// 原有的图表初始化代码
const ctx2 = canvas.getContext('2d');
const visibleBarsCount = Math.min(formattedTimestamps.length, 30);
const startIndex = formattedTimestamps.length - visibleBarsCount;

const followerGrowthChart = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: formattedTimestamps,
        datasets: [{
            label: 'Total Follower Gain',
            data: barData,
            backgroundColor: backgroundColors,
            borderColor: backgroundColors,
            pointRadius: 5,
            fill: true,
        }],
    },
    options: {
        animation: {
            onComplete: () => {
                delayed = true;
                // 动画结束后停止录制并触发下载
                if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                    mediaRecorder.stop();
                }
            },
            onProgress: () => {
                // 初始化MediaRecorder（仅第一次触发）
                if (!mediaRecorder) {
                    const stream = canvas.captureStream(30); // 设置帧率为30fps
                    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });

                    // 录制完成后生成下载链接
                    mediaRecorder.ondataavailable = (e) => {
                        const videoUrl = URL.createObjectURL(e.data);
                        const downloadLink = document.createElement('a');
                        downloadLink.href = videoUrl;
                        downloadLink.download = 'chart-animation.webm';
                        downloadLink.click();
                        URL.revokeObjectURL(videoUrl);
                    };

                    mediaRecorder.start();
                }
            },
            delay: (context) => {
                let delay = 0;
                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    delay = (context.dataIndex - startIndex) * 300 + context.datasetIndex * 100;
                }
                return delay;
            },
        },
        scales: {
            y: {
                grid: {
                    color: 'rgba(185, 187, 190, 0.1)'
                },
                ticks: {
                    precision: 0
                }
            },
            x: {
                grid: {
                    color: 'rgba(185, 187, 190, 0.1)'
                },
                max: formattedTimestamps[formattedTimestamps.length - 1],
                min: formattedTimestamps[startIndex]
            }
        },
        responsive: true,
        maintainAspectRatio: false
    },
});

注意事项 #

• 浏览器兼容性：MediaRecorder和canvas.captureStream()支持Chrome、Firefox、Edge等现代浏览器，Safari需版本14.1及以上。
• 视频格式：上述代码导出WebM格式，若需MP4，可尝试设置mimeType: 'video/mp4'（部分浏览器支持），或后续用工具转格式。
• 内存占用：长时间录制可能占用较多内存，建议控制动画时长或优化帧捕获逻辑。

三、进阶方案：html2canvas + ffmpeg.js（自定义格式） #

如果需要导出MP4等更多格式，可结合html2canvas捕获页面元素帧，再用ffmpeg.js将图片序列合成视频。这种方案灵活性更高，但会增加项目代码体积，适合有定制化需求的场景。

内容的提问来源于stack exchange，提问作者Noah Depireux