如何使用jQuery / JavaScript为视频应用不同的滤镜效果

Question

我正在为像这个网站的视频开发滤镜效果。我使用JavaScript/jQuery和织物，但它没有正确地将效果应用到视频中。

这是我尝试的代码:

$(document).ready(function() {
canvas = new fabric.Canvas('c');
canvas.setWidth(480);
canvas.setHeight(360);
var video1El = document.getElementById('video1');
var video1 = new fabric.Image(video1El, {
left: 0,
top: 0
});
canvas.add(video1);
video1El.load();
$(document.body).on('click', '#play', function() {
video1El.play();
var filter = new fabric.Image.filters.BlendColor({
color: 'red',
mode: 'tint',
alpha: 0.5
});
video1.filters = [filter];
});
fabric.util.requestAnimFrame(function render() {
var image = canvas.item(0);
var backend = fabric.filterBackend;
if (backend && backend.evictCachesForKey) {
backend.evictCachesForKey(image.cacheKey);
backend.evictCachesForKey(image.cacheKey + '_filtered');
}
canvas.item(0).applyFilters();
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
});

<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">play</button>
<canvas id="c" width="300" height="300"></canvas>
<video crossorigin="anonymous" id="video1" style="display: none" class="canvas-img" width="480" height="360">
<source id="video_src1" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

我的期望是创建视频过滤器。例如，灰度滤镜、模糊滤镜、彩色滤镜、RGB滤镜、阴影和黑白视频。就像我添加的网站链接。

i also try below

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

但是这个命令是如何工作的，有人可以给出一个过滤器的例子上面的命令。其他任何技术都是https://www.veed.io/tools/video-filters本网站使用ffmpeg。

Answer 1

你的代码基本上没问题。有趣的部分是

var filter = new fabric.Image.filters.BlendColor({
color:'red',
mode: 'tint',
alpha: 0.5
});

您正在使用过滤器BlendColor，它是许多其他过滤器之一。例如,

• BaseFilter
<
• 亮度/gh>
• 旋卷
• GradientTransparency
• 灰度
• 反
面具
噪音
• 像素化
• RemoveWhite
• 乌贼
• Sepia2
• 色彩

参见文档

然而，在fabric.Image.filters之后，您可以添加一个过滤器。例如，如果你想添加模糊效果，你可以使用fabric.Image.filters.Blur()。Blur()的第一个参数是一个对象。在文档中，您可以找到可以传递的属性。

例子:

$(document).ready(function() {
canvas = new fabric.Canvas('c');
canvas.setWidth(480);
canvas.setHeight(360);
var video1El = document.getElementById('video1');
var video1 = new fabric.Image(video1El, {
left: 0,
top: 0
});
canvas.add(video1);
video1El.load();

$(document.body).on('click', '#play', function() {
video1El.play();
var filter = new fabric.Image.filters.Blur({
blur: 0.5
});
video1.filters = [filter];
});
fabric.util.requestAnimFrame(function render() {
var image = canvas.item(0);
var backend = fabric.filterBackend;
if (backend && backend.evictCachesForKey) {
backend.evictCachesForKey(image.cacheKey);
backend.evictCachesForKey(image.cacheKey + '_filtered');
}
canvas.item(0).applyFilters();
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
});

<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">play</button>
<canvas id="c" width="300" height="300"></canvas>
<video crossorigin="anonymous" id="video1" style="display: none" class="canvas-img" width="480" height="360">
<source id="video_src1" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

---

上面的代码仅用于客户端。所以，如果你想让用户下载视频，你可能需要在服务器端修改视频，然后再发送给客户端。

下面是一个如何模糊视频的例子，使用FFmpeg和以下命令:

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

该命令对视频文件"input.mp4""应用sigma值为5和8步的模糊滤镜。并将输出保存到"output.mp4"(见文档)。

遵循以下步骤:

1. 在服务器上打开命令提示符或终端窗口。

2. 使用cd <DIRECTORY>导航到输入视频文件所在的目录

3. 输入FFmpeg命令(例如，您在上面看到的命令)并按Enter

命令运行完成后，输出的视频文件将与输入文件保存在同一目录下。

确保您的服务器上安装了FFmpeg，否则您可能会使用库(请参阅注释)。

视频处理完成后，可以发送给客户端。

Answer 2

看起来你正在尝试使用fabric.js库对视频元素应用过滤器。然而，fabric.js是一个处理画布元素的库，而不是视频元素。Canvas元素是基于图像的，而video元素是基于视频的，它们有不同的功能和限制。

你不能直接对video元素应用滤镜，但是实现类似效果的一种方法是使用canvas元素来绘制视频，将滤镜应用到画布上，然后将画布显示在视频的顶部。

你可以使用HTML5画布API在画布上绘制视频并设置其属性。你也可以使用像CamanJS和PixiJS这样的库，它们都提供了一种简单的方法来对画布元素应用各种过滤器。

下面是一个如何使用CamanJS对视频应用灰度过滤器的示例:

<canvas id="canvas"></canvas>
<video id="video" src="your_video.mp4"></video>
<script>
var canvas = document.getElementById('canvas'),
video = document.getElementById('video'),
ctx = canvas.getContext('2d');

video.addEventListener('play', function(){
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
Caman("#canvas", function () {
this.grayscale();
this.render();
});
}, false);
</script>

您可以通过替换本例中的过滤器名称来应用不同的过滤器。

希望这对你有帮助，给你一个起点。