How to Fix Getimagedata() Error the Canvas Has Been Tainted by Cross-Origin Data

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

The only solution I know is to have the image you want to load hosted on the same server as your files, you can't access and handle any image you want on the web through your canvas.

EDIT : If you want you can do like this.

The canvas has been tainted by cross-origin data

Along with the headers, I think you need to add the crossorigin attribute to your image tag.

Example image tag:

<img src="www.domain.com/image.jpg" crossorigin="anonymous" />

If you are doing this via javascript, here is the code example in the Mozilla link you provided:

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // insert image url here

// Notice that they set the cross origin attribute here
img.crossOrigin = "Anonymous";

Here is elevant passage from the docs (Source: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image):

The HTML specification introduces a crossorigin attribute for images
that, in combination with an appropriate CORS header, allows images
defined by the element loaded from foreign origins to be used in
canvas as if they were being loaded from the current origin.

And also this passage may be helpful from this page (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes):

By default (that is, when the attribute is not specified), CORS is not
used at all. The "anonymous" keyword means that there will be no
exchange of user credentials via cookies, client-side SSL certificates
or HTTP authentication as described in the Terminology section of the
CORS specification.

The canvas has been tainted by cross-origin data local image

For security reasons, many browsers will complain if you try to do certain things (canvas image drawing among them), if you use a file:// URL.

You really should serve both the page and the images from a local HTTP server in order to avoid those restrictions.

Failed to execute 'getImageData' - The canvas has been tainted by cross-origin data

I was able to get this working by amending my CORS rules slightly:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

And setting crossOrigin to anonymous on the image:

image.crossOrigin = 'anonymous';

Full set of commands:

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = "https://s3-us-west-2.amazonaws.com/boom-orca/people-deal-header.png";
SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});

Screenshot:

CORS

Tainted canvases may not be exported

For security reasons, your local drive is declared to be "other-domain" and will taint the canvas.

(That's because your most sensitive info is likely on your local drive!).

While testing try these workarounds:

Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).
Post your images to a site that supports cross-domain sharing (like dropbox.com or GitHub). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin="anonymous" ...)
Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).