Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D'

Question

I try to get this example running.

This example has a small js code:

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 / 2;
          self.height = self.video.videoHeight / 2;
          self.timerCallback();
        }, false);
    },
  
    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;
    }
  };

document.addEventListener("DOMContentLoaded", () => {
  processor.doLoad();
});

where this line:

let frame = this.ctx1.getImageData(0, 0, this.width, this.height);

causes a DOMEXception:

processor.js:29 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at Object.computeFrame (file:///tmp/dom-examples/canvas/chroma-keying/processor.js:29:29)
    at Object.timerCallback (file:///tmp/dom-examples/canvas/chroma-keying/processor.js:6:12)
    at HTMLVideoElement.<anonymous> (file:///tmp/dom-examples/canvas/chroma-keying/processor.js:23:16)
computeFrame    @   processor.js:29
timerCallback   @   processor.js:6
(anonymous) @   processor.js:23

I do not fully understand, why a read method results in an exception telling that the content has changed. Anyhow, it is intended to change the canvas content. How can it be resolved?

Answer 1

If you draw onto a canvas any data that was retrieved from a separate origin with no CORS approval, the canvas becomes "tainted", and any attempt to read from the canvas will be blocked.

Basically, you don't have permission to read the data from this.video. I can't see your HTML, but if you're trying to access an video from the internet, you could try setting the crossorigin property of the element to "anonymous" to request for access. If that doesn't work, try downloading the video onto your computer and loading it locally.

More Info on CORS with canvas and images