canvas调节视频颜色

可以使用 canvas 的图片处理功能来调节视频颜色。具体步骤如下：

1. 将视频每一帧转换成图片，可以使用 Video 和 Canvas 的 API 实现。

2. 将图片加载到 canvas 中。

3. 使用 canvas 的图像处理方法，如 `ctx.filter()` 来调节颜色。可以使用 `brightness()`、`contrast()`、`saturate()`、`hue-rotate()` 等 CSS 滤镜函数来调节颜色。

4. 将处理后的图片绘制到 canvas 中。

5. 重复步骤 2-4 直到处理完所有帧。

6. 将 canvas 中的处理后的帧转换成视频，可以使用 MediaRecorder API 实现。

以下是一个简单的示例代码：

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const filters = {
  brightness: 100,
  contrast: 100,
  saturation: 100,
  hue: 0
};

function applyFilters() {
  ctx.filter = `brightness(${filters.brightness}%) contrast(${filters.contrast}%) saturate(${filters.saturation}%) hue-rotate(${filters.hue}deg)`;
}

function processFrame() {
  // 将视频帧绘制到 canvas 中
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  
  // 应用滤镜
  applyFilters();
  
  // 将处理后的帧绘制到 canvas 中
  ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);

  // 重复处理下一帧
  requestAnimationFrame(processFrame);
}

// 监听视频加载完成事件
video.addEventListener('loadeddata', () => {
  // 设置 canvas 尺寸与视频尺寸相同
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  // 开始处理视频帧
  requestAnimationFrame(processFrame);
});

// 监听滤镜参数变化事件
document.getElementById('brightness').addEventListener('input', (event) => {
  filters.brightness = event.target.value;
});

document.getElementById('contrast').addEventListener('input', (event) => {
  filters.contrast = event.target.value;
});

document.getElementById('saturation').addEventListener('input', (event) => {
  filters.saturation = event.target.value;
});

document.getElementById('hue').addEventListener('input', (event) => {
  filters.hue = event.target.value;
});

在 HTML 中，需要添加一个 video 元素作为视频播放器，以及一些控制滤镜参数的 input 元素。

<video id="video" src="path/to/video.mp4" autoplay></video>

<label for="brightness">Brightness:</label>
<input id="brightness" type="range" min="0" max="200" value="100" step="1">

<label for="contrast">Contrast:</label>
<input id="contrast" type="range" min="0" max="200" value="100" step="1">

<label for="saturation">Saturation:</label>
<input id="saturation" type="range" min="0" max="200" value="100" step="1">

<label for="hue">Hue:</label>
<input id="hue" type="range" min="-180" max="180" value="0" step="1">

<canvas id="canvas"></canvas>

这个示例代码中，我们定义了一个 filters 对象来存储滤镜参数，然后监听 input 元素的变化事件，更新滤镜参数。applyFilters() 函数用来应用滤镜。processFrame() 函数用来处理视频帧。最后，我们使用 requestAnimationFrame() 来实现逐帧处理视频。