使用红色和黑色以及白色的HTML Canvas渲染视频

Question

我需要使用红色的HTML Canvas渲染视频。下面的代码（如果不起作用，请尝试codepen code）。这段代码添加了红色图层，但我首先需要 - 去饱和，降低亮度后才添加红色图层。我尝试使用像素（性能问题），ctx.filter也不起作用。

const URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
const video = document.createElement('video');

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
}).then((stream) => {
  video.src = URL.createObjectURL(stream);
});

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const loop = () => {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'rgba(255, 0, 0, .45)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  requestAnimationFrame(loop);
};
loop();

<canvas id="canvas" width="400" height="400"></canvas>

Answer 1

您可以使用multiply混合模式淘汰其他颜色通道。由于您只将红色定义为其他通道，并将其与0相乘，留下它们＆＃34;为空＆＃34;。

请记住将复合模式重置为＆＃34; source-over＆＃34;在绘制下一个视频帧之前。

＆＃13;

＆＃13;

var img = new Image(); img.onload = draw; img.src = "//i.imgur.com/Kzz84cr.png";
function draw() {
  c.width = this.width; c.height = this.height;
  
  var ctx = c.getContext("2d");
  // main loop
  ctx.drawImage(this, 0, 0);                     // draw video frame
  ctx.globalCompositeOperation = "multiply";     // change blending mode
  ctx.fillStyle = "red";                         // draw red on top
  ctx.fillRect(0, 0, c.width, c.height);
  ctx.globalCompositeOperation = "source-over";  // "reset"
  // rinse, repeat
}

＆＃13;

<canvas id=c></canvas>

＆＃13;

＆＃13;

＆＃13;