如何在Fabric.js中为视频添加滤镜效果？解决视频停播问题

我来帮你搞定这个问题！你遇到的视频停止播放的情况，本质是因为Fabric.js的Image滤镜默认是为静态图像设计的——当你给视频对象一次性应用滤镜后，它只会处理视频的第一帧，之后视频的动态帧不会再被滤镜处理，看起来就像视频停了。

要解决这个问题，我们需要在视频的每一帧更新时，重新对当前帧应用滤镜并渲染画布，这样就能让视频带着滤镜持续播放了。下面是具体的实现步骤和示例代码：

核心思路 #

视频是由连续的静态帧组成的，我们需要同步浏览器的渲染周期，在每一次帧刷新时：

1. 拿到视频当前的帧数据
2. 对这一帧应用滤镜
3. 重新渲染Fabric画布

完整示例代码（以色调调整为例） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fabric.js 视频滤镜示例</title>
    <!-- 引入Fabric.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="640" height="360"></canvas>
    <!-- 视频元素，注意添加muted以满足浏览器自动播放规则 -->
    <video id="video" width="640" height="360" loop muted autoplay style="display: none;">
        <source src="your-video-file.mp4" type="video/mp4">
    </video>

    <script>
        // 初始化Fabric画布
        const canvas = new fabric.Canvas('canvas');
        // 获取页面中的视频元素
        const videoElement = document.getElementById('video');

        // 创建Fabric视频对象并添加到画布
        const fabricVideo = new fabric.Video(videoElement, {
            left: 0,
            top: 0,
            width: 640,
            height: 360
        });
        canvas.add(fabricVideo);

        // 定义你需要的滤镜：这里用色调滤镜，给视频叠加红色调
        const tintFilter = new fabric.Image.filters.Tint({
            color: '#ff0000', // 滤镜颜色
            opacity: 0.3      // 颜色透明度
        });

        // 帧更新函数：每帧都重新应用滤镜并渲染
        function updateFilteredFrame() {
            // 只有视频在播放时才处理
            if (!videoElement.paused && !videoElement.ended) {
                // 给当前视频帧应用滤镜
                fabricVideo.filters = [tintFilter];
                // 触发滤镜计算
                fabricVideo.applyFilters();
                // 重新渲染画布
                canvas.renderAll();
            }
            // 同步浏览器渲染周期，持续调用
            requestAnimationFrame(updateFilteredFrame);
        }

        // 视频开始播放时启动帧更新循环
        videoElement.addEventListener('play', () => {
            updateFilteredFrame();
        });
    </script>
</body>
</html>

关键细节说明 #

• 为什么要每帧重新应用滤镜？：Fabric的滤镜是基于当前图像像素数据计算的，视频每一帧都是新的像素数据，所以必须每次都重新处理才能让滤镜作用在最新帧上。
• 使用requestAnimationFrame：这个API会同步浏览器的刷新频率（通常60fps），保证滤镜效果流畅，不会出现卡顿。
• 多滤镜组合：如果需要同时应用多个滤镜，只需把滤镜放在数组里即可，比如：

  fabricVideo.filters = [tintFilter, invertFilter];
  

自定义颜色调整示例（颜色矩阵滤镜） #

如果需要更精细的颜色控制，可以使用ColorMatrix滤镜，比如实现颜色反转效果：

const invertFilter = new fabric.Image.filters.ColorMatrix({
    matrix: [
        -1, 0, 0, 0, 255,
        0, -1, 0, 0, 255,
        0, 0, -1, 0, 255,
        0, 0, 0, 1, 0
    ]
});

注意事项 #

• 确保视频元素添加了muted属性：现代浏览器禁止自动播放带声音的视频，加muted才能让视频自动播放。
• 性能优化：如果滤镜比较复杂，可能会导致帧率下降，可以考虑降低画布分辨率，或者使用Web Worker处理滤镜计算（Fabric.js部分滤镜支持异步处理）。

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