javascript - 如何准确过滤RGB值以获得色键效果

我只是阅读this教程并尝试了此示例。因此，我从网上下载了一个视频进行自己的测试。我所要做的就是在if条件下调整rgb值

这里是示例的示例代码

computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    let l = frame.data.length / 4;

    for (let i = 0; i < l; i++) {
      let r = frame.data[i * 4 + 0];
      let g = frame.data[i * 4 + 1];
      let b = frame.data[i * 4 + 2];
      if (g > 100 && r > 100 && b < 43)
        frame.data[i * 4 + 3] = 0;
    }
    this.ctx2.putImageData(frame, 0, 0);
    return;
  }

在教程示例中，它过滤掉了黄色(我猜不是黄色)。我下载的示例视频使用绿色背景。所以我调整了if条件的rgb值以获得所需的结果

经过多次尝试，我设法做到了。



现在，我想知道的是如何准确无误地准确过滤出绿色屏幕(或其他任何屏幕)。或随机调整值。

仅凭猜测就需要花费数小时才能完全正确地实现它。这只是一个具有实际应用程序的示例。可能还需要更多时间。

注意:该示例目前正在Firefox中运行。

最佳答案

您可能只需要一个更好的算法。这是一个，它并不完美，但是您可以更轻松地对其进行调整。



基本上，您只需要一个颜色选择器，并从视频中选择最亮和最暗的值即可(分别将RGB值放入l_和d_变量中)。您可以根据需要稍微调整公差，但是通过用颜色选择器选择不同的区域来正确设置l_和r_值将为您提供更好的关键。

let l_r = 131,
    l_g = 190,
    l_b = 137,

    d_r = 74,
    d_g = 148,
    d_b = 100;

let tolerance = 0.05;

let processor = {
  timerCallback: function() {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    let self = this;
    setTimeout(function () {
        self.timerCallback();
      }, 0);
  },

  doLoad: function() {
    this.video = document.getElementById("video");
    this.c1 = document.getElementById("c1");
    this.ctx1 = this.c1.getContext("2d");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");
    let self = this;
    this.video.addEventListener("play", function() {
        self.width = self.video.videoWidth;
        self.height = self.video.videoHeight;
        self.timerCallback();
      }, false);
  },

  calculateDistance: function(c, min, max) {
      if(c < min) return min - c;
      if(c > max) return c - max;

      return 0;
  },

  computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
        let l = frame.data.length / 4;

    for (let i = 0; i < l; i++) {
      let _r = frame.data[i * 4 + 0];
      let _g = frame.data[i * 4 + 1];
      let _b = frame.data[i * 4 + 2];

      let difference = this.calculateDistance(_r, d_r, l_r) +
                       this.calculateDistance(_g, d_g, l_g) +
                       this.calculateDistance(_b, d_b, l_b);
      difference /= (255 * 3); // convert to percent
      if (difference < tolerance)
        frame.data[i * 4 + 3] = 0;
    }
    this.ctx2.putImageData(frame, 0, 0);
    return;
  }
};
// :/

关于javascript - 如何准确过滤RGB值以获得色键效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38419980/