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

Question

I'm interested in using smartcrop.js with some user uploaded images on my site. A user can upload an image of any size to my Amazon S3 bucket. This image is then associated with the user and when they visit their profile they can see the images cropped nicely. When I try and perform some sort of manipulation with smartcrop on an image element I get the error:

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

This can be reproduced with the following steps:

var image = new Image();
image.src = "https://freelancestudent.s3.amazonaws.com/files/google.png"
SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});
smartcrop.js:282 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

I've checked the CORS configuration editor in my S3 control panel and it looks like this:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

My understanding was that <AllowedOrigin>*</AllowedOrigin> should mean this problem shouldn't exist? I've read a solution that I could save the image to the server to display but I wish to keep my static files and the production server separate. Any ideas?

Looking at the response for https://freelancestudent.s3.amazonaws.com/files/google.png in my browser, it doesn’t contain *any* CORS-related headers. — CBroe, May 03 '16 at 15:39
If I've saved the CORS configuration as above on that bucket, why wouldn't it contain the relevant headers? — Nanor, May 03 '16 at 16:07
Possible duplicate of [How to fix getImageData() error The canvas has been tainted by cross-origin data?](https://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data) — handle, Oct 27 '17 at 16:15

score 8 · Accepted Answer · answered May 03 '16 at 16:50

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:

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

1 Answers1