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

admin管理员组

文章数量:1287879

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 = ".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?

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./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?

• javascript
• canvas
• amazon-s3

Share Improve this question Follow asked May 3, 2016 at 15:29 NanorNanor 2,55088 gold badges4040 silver badges7575 bronze badges 3

• Looking at the response for freelancestudent.s3.amazonaws./files/google.png in my browser, it doesn’t contain any CORS-related headers. – C3roe Commented May 3, 2016 at 15:39
• If I've saved the CORS configuration as above on that bucket, why wouldn't it contain the relevant headers? – Nanor Commented May 3, 2016 at 16:07
• Possible duplicate of How to fix getImageData() error The canvas has been tainted by cross-origin data? – handle Commented Oct 27, 2017 at 16:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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./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 mands:

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

Screenshot:

本文标签： javascriptFailed to execute 39getImageData39The canvas has been tainted by crossorigin dataStack Overflow