CORS issue with canvas

[amuramoto]

After drawing an image from the local file system (/www/img) to a canvas, I receive a CORS error when attempting to extract the image data from the canvas.

The error is:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data

Here is the code I used to reproduce. Creating the canvas copy is probably not necessary, but for completeness I'm including all the code.

//draw original image to canvas, and create a copy of the canvas
private drawImage (imageUri) {      
    this.image = new Image();
    this.image.onload = () => {         
        this.canvasWidth = window.innerWidth - 40;
        this.canvasHeight = (this.canvasWidth / this.image.width) * this.image.height - 40 ;    
        this.photoCtx.canvas.width = this.canvasWidth;
        this.photoCtx.canvas.height = this.canvasHeight;        
        this.photoCtx.drawImage(this.image, 0, 0, this.image.width - 40, this.image.height - 40,
                            0, 0, this.canvasWidth, this.canvasHeight);

      this.canvasCopy = this.photoCanvas.cloneNode();
      this.ctxCopy = this.canvasCopy.getContext("2d");
      this.ctxCopy.drawImage(this.image, 0, 0, this.image.width - 40, this.image.height - 40,
                                                 0, 0, this.canvasWidth, this.canvasHeight)
    }
    this.image.src=imageUri;
  }

private getImageData () {
     //throws CORS error
      let imageData = this.ctxCopy.getImageData(0,0,this.canvasWidth, this.canvasHeight);
}