上一篇我們提到我們接著要開始玩一些比較有趣的實作~

所以我們就來講講怎麼在web端實作綠幕摳像(Green Screen Keying)~

什麼是綠幕摳像？

大家應該都有看過很多電影特效幕後花絮的照片，照片裡面的特效演員會在一個綠色帆布架構成的場景前面拍戲，這種綠色帆布場景就是動畫業界常常在說的綠幕。

而綠幕摳像(Green Screen Keying)指的就是把綠幕影片中的人物單獨擷取出來的技術。

有些人可能會好奇為什麼要用綠色，據說是因為綠色是成效最好的一種顏色，大部分的戲劇拍攝道具/ 人類皮膚...,etc. 含有綠色的部分佔比，平均來講比較少。

其實這個技術在很多的影像後製軟體裡面都有對應的功能(例如After Effects的 Color Key)，讓使用者可以從拍攝好的綠幕影片中取得後製合成所需要的素材。

用Canvas實作做動態綠幕摳像

大家不知道還對我們之前使用過的ctx.drawImage 這個api有沒有印象～

這個api可以讓使用者去把指定的img source繪製到canvas上面，而除了image source以外，

他繪製的對象也可以是另外一張canvas(把某張canvas的內容畫到現在這張canvas上面), 甚至是可以把影片(video)某一瞬間的靜態畫面畫出來。

延伸閱讀 - MDN 上的ctx.drawImage: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

這個案例其實蠻簡單的，主要的流程大致上就是

• 首先創建一個video tag用來承接video source
• 用ctx.drawImage 去By frame 把video 元素的畫面繪製到另外一個canvas上
• 從繪製好video畫面的canvas上面提取imageData
• 把imageData做摳像處理
• 把做好摳像處理的imageData再畫到另外一張canvas上面(一共需要兩張canvas)

接下來就是實作的部分~

而在開始實作之前我們必須要先有一個綠幕的影像拿來當做素材，這邊可以去pixabay.com，這上面有提供很多免費的綠幕素材。

老樣子放個實作的影片：

github repo : https://github.com/mizok/ithelp2021/blob/master/src/js/green-screen-keying/index.js
github page: https://mizok.github.io/ithelp2021/green-screen-keying.html

const videoSource = require('../../video/t-rex.mp4');
import { Canvas2DFxBase } from '../base';


class GreenScreenKeying extends Canvas2DFxBase {
  constructor(cvs, gmin = 150, rmax = 100, bmax = 100) {
    super(cvs);
    this.gmin = gmin;
    this.rmax = rmax;
    this.bmax = bmax;
    this.init();
  }

  init() {
    this.initScreens(videoSource, 500);
  }


  initScreens(videoSrc, size) {
    // 這邊我們創建一個video tag用來承接透過require() import 進來的 source
    this.video = document.createElement('video');

    // 這邊我們透過promise 來確保後續的程式都會在video 載入完畢之後執行, 這部分這樣寫的原因主要是因為要把canvas的大小設置成和影片一樣，但是video 的長寬尺寸必須要在載入完畢之後才能正確取得(否則可能會取得0)
    let resolve;
    const promise = new Promise((res) => { resolve = res });


    this.video.addEventListener('loadeddata', () => {
      // Video is loaded and can be played
      resolve();
    }, false);

    // body 被按下的時候發動 video的play方法，然後開始canvas的渲染
    document.body.addEventListener('click', () => {
      this.video.play();
      this.animate();
    }, false);

    promise.then(() => {
      // videoWidth/videoHeight分別是video 的原始高/原始寬
      const vw = this.video.videoWidth;
      const vh = this.video.videoHeight;
      // 這邊就是開始把canvas和video的大小都設定為一樣
      this.videoStyleWidth = size;
      this.videoStyleHeight = (vh / vw) * size;
      this.video.style.width = this.videoStyleWidth + 'px';
      this.video.style.height = this.videoStyleHeight + 'px';
      this.video.setAttribute('playsinline', true); // 這一行是for ios裝置, 避免他被play的時候自動變成全螢幕

      // 創建一個架空的canvas, 把他的長寬設定成跟video現在一樣
      this.virtualCanvas = document.createElement('canvas');
      this.virtualCanvas.width = this.videoStyleWidth;
      this.virtualCanvas.height = this.videoStyleHeight;
      // 取得架空canvas的2Dcontext，並把它設置為本class的一項property
      this.virtualCtx = this.virtualCanvas.getContext('2d');
      this.setCanvasSize(this.videoStyleWidth, this.videoStyleHeight);
      document.body.prepend(this.video);
    })

    this.video.src = videoSrc;
    this.video.load(); // 這一行主要是for移動裝置, 因為移動裝置的loadeddata必須要用.load來觸發
  }

  animate() {
    // 若影片停止或被暫停, 則停止canvas動畫的渲染
    if (this.video.paused || this.video.ended) return;
    const $this = this;
    // 把當前video 的樣子繪製在架空的canvas上
    this.virtualCtx.drawImage(this.video, 0, 0, this.videoStyleWidth, this.videoStyleHeight);
    // 取得架空canvas的imageData
    const virtualImageData = this.virtualCtx.getImageData(0, 0, this.videoStyleWidth, this.videoStyleWidth);
    // 把取得的imageData做綠幕摳像處理
    const keyedImageData = this.getKeyedImageData(virtualImageData);
    // 回填imageData
    this.ctx.putImageData(keyedImageData, 0, 0);
    requestAnimationFrame(this.animate.bind($this))
  }

  getKeyedImageData(imageData) {
    const data = imageData.data;
    const keyedImageData = this.ctx.createImageData(imageData.width, imageData.height);
    for (let i = 0; i < data.length; i = i + 4) {
      // 這邊的運算其實也很簡單，原理就是若偵測到g channel的值超過150 ,且 r和b都低於100(也就是顏色很可能偏綠)，那就把該組像素的alpha channel值設置為0, 讓他變透明 
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      keyedImageData.data[i] = r;
      keyedImageData.data[i + 1] = g;
      keyedImageData.data[i + 2] = b;
      if (g > this.gmin && r < this.rmax && b < this.bmax) {
        keyedImageData.data[i + 3] = 0;
      }
      else {
        keyedImageData.data[i + 3] = data[i + 3];
      }
    }
    return keyedImageData;
  }


}


(() => {
  const cvs = document.querySelector('canvas');
  const instance = new GreenScreenKeying(cvs);
})();

小結

這次我們介紹了如何在web端實現綠幕摳像，不過實際上這樣的做法還算是比較陽春的方法。
因為這種摳像的運算方式(也就是透過設置channel最小值和最大值來阻擋綠色被輸出)
其實在某些情況下還是會有瑕疵(例如髮絲這種過細的圖像,很容易因為出現透光的狀況而導致沾到背景的顏色)這種情況可能就會需要更進階的圖形演算法(有興趣的人可以去查查convolution kernel)。

另外，這次介紹的綠幕摳像其實也可以用在webcam影像，像是有些yt實況主會把自己的webcam畫面去背放在實況畫面上，有興趣的人也可以自己嘗試看看（不過可能要先學會怎麼自己架綠幕XD）