Question

169

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

rated 0 times [ 173] [ 4] / answers: 1 / hits: 15608 / 8 Years ago, tue, may 3, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alorafrancisl

Add To Favorites

Follow

Total Points: 80

Total Questions: 96

Total Answers: 102

Location: Ukraine

Member since Sun, Dec 13, 2020

4 Years ago

answered 8 Years ago elishaannac · Accepted Answer

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: