Solve the getImageData() error: the canvas is contaminated by cross-domain data

Question

My code runs fine on localhost but not on the website.

I get this error from the console, for this line .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Part of my code:

jQuery.Event.prototype.rgb=function(){
        var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset(). top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

Note: My image URL (src) comes from a subdomain URL

Answer 1

As others have said, you are "polluting" the canvas by loading from a cross-origin domain.

https://developer.mozilla.org/en-US/docs/ HTML/CORS_Enabled_Image

However, you can prevent this by simply setting:

img.crossOrigin = "Anonymous";

This only works if the remote server correctly sets the following headers:

Access-Control-Allow-Origin "*"

Dropbox file picker when using the Direct Link optionThis is a good example. I'm using this at oddprints.com to suck images from a remote dropbox image URL into my canvas and then submit the image data back to my server. All written in JavaScript