如何用jQuery/JavaScript实现视频滤镜？Fabric.js及FFmpeg方案求助

一、Fabric.js视频滤镜不生效的修复 #

当前代码的核心问题在于未实时更新视频帧数据，且未标记对象需要重新渲染。以下是修正后的完整代码及关键说明：

修正后的JavaScript代码 #

$(document).ready(function() {
  const canvas = new fabric.Canvas('c');
  canvas.setWidth(480);
  canvas.setHeight(360);

  const video1El = document.getElementById('video1');
  let video1 = new fabric.Image(video1El, {
    left: 0,
    top: 0
  });

  canvas.add(video1);
  video1El.load();

  $(document.body).on('click', '#play', function() {
    video1El.play();
    // 应用红色色调滤镜
    const filter = new fabric.Image.filters.BlendColor({
      color: 'red',
      mode: 'tint',
      alpha: 0.5
    });
    video1.filters = [filter];
    video1.dirty = true; // 标记对象需重新渲染
  });

  // 自定义灰度滤镜切换函数
  window.addGrayscaleFilter = function() {
    video1.filters = [new fabric.Image.filters.Grayscale()];
    video1.dirty = true;
  }

  fabric.util.requestAnimFrame(function render() {
    if (!video1El.paused && !video1El.ended) {
      // 每帧更新视频帧数据，确保滤镜应用到最新画面
      video1.setElement(video1El);
      video1.dirty = true;
      canvas.renderAll();
    }
    fabric.util.requestAnimFrame(render);
  });
});

对应HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<button id="play">播放并添加红色滤镜</button>
<button onclick="addGrayscaleFilter()">切换灰度滤镜</button>
<canvas id="c" width="480" height="360"></canvas>
<video crossorigin="anonymous" id="video1" style="display: none" width="480" height="360">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

关键修复点 #

• 每帧渲染时调用setElement更新视频帧，确保滤镜作用于最新画面
• 设置video1.dirty = true强制Fabric.js重新渲染对象
• 简化缓存逻辑，setElement会自动触发缓存更新

常用Fabric.js滤镜示例 #

• 灰度：new fabric.Image.filters.Grayscale()
• 模糊：new fabric.Image.filters.Blur({blur: 5})
• 阴影：new fabric.Image.filters.Shadow({color: 'black', blur: 10, offsetX: 5, offsetY: 5})
• RGB调整：new fabric.Image.filters.RGB({red: 1.2, green: 0.8, blue: 0.9})

二、FFmpeg滤镜命令解析 #

给定命令的工作原理 #

ffmpeg -i input.mp4 -vf "gblur=sigma=5:steps=8" -c:v libx264 -crf 22 -c:a aac -strict -2 output.mp4

参数拆解：

• -i input.mp4：指定输入视频文件
• -vf "gblur=sigma=5:steps=8"：应用高斯模糊滤镜，sigma=5控制模糊强度（值越大越模糊），steps=8控制模糊计算的迭代步数（步数越多效果越平滑）
• -c:v libx264：使用H.264编码输出视频
• -crf 22：控制视频质量，取值范围0-51，22是平衡质量与体积的默认值
• -c:a aac：使用AAC编码输出音频
• -strict -2：允许使用实验性AAC编码特性（新版FFmpeg可省略）

常用FFmpeg滤镜示例 #

• 灰度效果：

ffmpeg -i input.mp4 -vf "format=gray" -c:v libx264 -crf 22 -c:a aac output.mp4

• 黑白高对比度：

ffmpeg -i input.mp4 -vf "lutyuv='u=128:v=128',eq=contrast=1.5" -c:v libx264 -crf 22 -c:a aac output.mp4

• 红色色调滤镜：

ffmpeg -i input.mp4 -vf "colorchannelmixer=rr=1.2:rg=0:rb=0:gr=0:gg=1:gb=0:br=0:bg=0:bb=1" -c:v libx264 -crf 22 -c:a aac output.mp4

• 阴影效果：

ffmpeg -i input.mp4 -vf "split [main][shadow]; [shadow] crop=iw:ih-10:0:10,boxblur=luma_radius=5:luma_power=1,colorchannelmixer=aa=0.5 [shadow]; [main][shadow] overlay=0:10" -c:v libx264 -crf 22 -c:a aac output.mp4

三、VEED网站技术实现推测 #

VEED这类在线视频编辑平台通常采用前后端结合的方案：

1. 前端实时预览：使用WebGL（如Three.js、PixiJS）或Canvas API实现实时滤镜预览，避免等待后端处理，提升交互体验。Fabric.js可用于基础效果，但复杂滤镜更依赖WebGL保证性能。
2. 后端核心处理：大概率使用FFmpeg作为视频渲染引擎，因为它支持几乎所有视频格式和滤镜效果，能批量处理且输出质量稳定。平台会将用户的前端操作转换为FFmpeg命令，在服务器端执行后返回处理后的视频。
3. 配套技术：后端可能使用Node.js处理用户请求与FFmpeg调用；云存储服务存储用户上传和处理后的视频；前端使用React/Vue等框架构建交互界面。

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