Croppie: Uploading of Image in Safari (Cross-origin image load denied by Cross-Origin Resource Sharing policy.)

[jethrubalarbar]

I am trying to crop and scale a file that is added to an input type "File". It works fine in Chrome, Firefox and IE but not in Safari

I get this error here

line 249: var r = s(n, i.elements.img);

[thedustinsmith]

Sorry for the delayed response - are you still having this issue?

[doncullen]

Similar issue to OP; mine's on Chrome and am running it locally (not via server), says:

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Error (native)
at Croppie._getCanvasResult (file:///C:/Users/User/Desktop/crop/croppie.js:962:23)

Checking that area brings this up:

return canvas.toDataURL(data.format, data.quality);

[thedustinsmith]

@doncullen Are you uploading the file or are you using an existing image located elsewhere?

[sureshkoduri]

Hi, I have the same issue using amazon s3 images

[thedustinsmith]

@sureshkoduri Can you show me some code? Does your amazon s3 bucket has CORS enabled?

[sureshkoduri]

@thedustinsmith , Yes CORS is enabled. But I have the below error

[thedustinsmith]

If I go to http://foliotek.github.io/Croppie - and run the following code in my safari console, then get the result, it works fine.

$('#cropper-1').croppie('bind', 'http://i.imgur.com/HMf7XWD.jpg')

imgur sets the proper CORS headers when serving those images. I'm guessing your s3 bucket isn't setting the Access-Control-Allow-Origin header properly. If you give me a link to an image, I can confirm that pretty easily.

[sureshkoduri]

https://bizooku-cloud-x.s3.amazonaws.com/fda9b2ac4db9a0e3fe1132ea86759109__icon.jpg

Above is the sample image from s3

[thedustinsmith]

Check out the difference in the response headers from imgur as opposed to your s3 bucket. Your bucket is missing Access-Control-Allow-Origin: *

[sureshkoduri]

Thank you @thedustinsmith. Its worked after adding Access-Control-Request-Headers to AllowedHeaders.

[markmnl]

I have this problem today with latest in Chrome with facebook profile pictures which do include the HTTP header:

access-control-allow-origin:*

[markmnl]

Inspecting the img element at run-time it does not have crossOrigin set..

To clarify problem is when getting result get the error:

croppie.min.js:1 Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

I bind croppie after load just passing the url.

[svvitale]

@markmnl it's worth mentioning that Croppie will only set the crossOrigin attribute if the image has EXIF data present or enableOrientation is set to true. @thedustinsmith, feel free to correct me if I'm wrong here.

In the _create() call

self.options.useCanvas = self.options.enableOrientation || _hasExif.call(self);

In the subsequent loadImage() call:

if (useCanvas && src.substring(0,4).toLowerCase() === 'http') {
    img.setAttribute('crossOrigin', 'anonymous');
}

I was still having this issue after verifying my S3 CORS configuration and was able to fix it by adding enableOrientation: true to my croppie config.

[tamdao]

I have the same issue and I have fixed this bug on PR: https://github.com/Foliotek/Croppie/pull/273

[svvitale]

It doesn't look like this PR resolves the case where the caller needs crossOrigin set, but does not want to enableOrientation.

[markmnl]

I add an extra option so can explicitly specify:

https://github.com/markmnl/Croppie/commit/b2fc8c4a3d0fc5a6458290b998e6132297b16530

Can create a PR if yous want?

[simonmilz]

Same issue with Google Cloud Storage

[thedustinsmith]

Sorry guys, I've been a little busy. Yes, @svvitale, you're right. We're only setting the cross origin attribute when we're going to have to deal with the canvas. I can see the argument for always setting that crossOrigin attribute. In fact, I think that's the right change. Thoughts?

[svvitale]

If the image is located on the same server as the page, won't that cause an error?

I would venture to say that just removing the canvas constraint would be sufficient:

if (src.substring(0,4).toLowerCase() === 'http') {
    img.setAttribute('crossOrigin', 'anonymous');
}

[thedustinsmith]

That's the change I was referring to, and no I don't think setting crossOrigin="anonymous" on an image that's on the same domain will cause any issues.

[thedustinsmith]

This one will be fixed in the next release