Safari HTTPS data url cross origin error

[fracsi]

On OSX and iOS Safari if i try to combine cropper with a file uploader (uploading only occurs after submit) on HTTPS, passing the data uri to cropper, the XHR request which transforms the data uri to ArrayBuffer is denied because of the cross-origin policy (only allowed on HTTP).

[fengyuanchen]

I see. Do you have any solution for this?

[shaneparsons]

This only seems to be a problem with 2.2.0.
I updated to 2.2.0 yesterday and was having this issue until I reverted back to 2.1.0.

[fengyuanchen]

You need to set the response header Access-Control-Allow-Origin: *.

[fracsi]

@fengyuanchen
As i stated in the original question, i'm passing a data uri to cropper (data:image/jpeg;base64...), so i cannot set any response header, because there is no response. This is a Safari limitation for loading a data uri through ajax. In your code you use ajax to transform the image to ArrayBuffer.

[fengyuanchen]

Okay~ I have no solution yet. You might need to set the checkOrientation to false in Safari.

[fracsi]

Can't you use a canvas instead of ajax to convert the image to ArrayBuffer?
Something like: someCanvasElement.getContext('2d').getImageData(0, 0, width, height).data.buffer ?

[fengyuanchen]

No, there are more issues with a canvas in Safari, see #120, #509.

[fengyuanchen]

@fracsi How about use a Blob URL (URL.createObjectURL(file))?

[fengyuanchen]

Please update to the v2.2.1.

[michael-go]

I believe I just had the same issue on an older Chrome 37
when creating $(myImg).cropper() on an image whose source is a data-url, i got the following CORS error:
XMLHttpRequest cannot load data:image/png;base64,.... Received an invalid response. Origin '...' is therefore not allowed access.

The issue was solved by using URL.createObjectURL() instead of the data-url as you suggested.

This worked for me because I originally got the data-url using a FileReader() which means I had a file object. However if someone has only a data-url to work with, I think it is still possible to make it work, however requires changing the code of cropper.js: avoiding setting crossOrigin="anonymous" on data-url's specificaly, because this causes Safari to regard the image as 'tamed' (In the past I stumbled upon a similar issue on iPhone's Safari, and that solved it)

Thanks,
and b.t.w, cropper.js is great 😃

[fengyuanchen]

@michael-go You can try the latest version (v2.2.1), it doesn't load Data URL by XMLHttpRequest any more.

[michael-go]

@fengyuanchen This was the first thing I tried, but it didn't help in my case - I double-checked it now and still get the error with Data URL.
Thanks

[fracsi]

@fengyuanchen
Can you update the dist versions also? I installed cropper with bower, and in version 2.2.1 the dist directory contains 2.2.0 files.

[qiankaijie]

哥们，2.2.1没更新到位呀！ 最新文件还是2.2.0的

[fengyuanchen]

@fracsi @qiankaijie Sorry~ I forgot to submit the release files...It's done now.