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.
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);
}