cropperjs: crossOrigin problem with checkCrossOrigin
I’m submitting a bug
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[x] Documentation issue or request
Current behavior
I dynamically create an object using new Image
and apply a crossOrigin
value of anonymous
. Once it’s loaded, I add it to the DOM. Screenshot:
Then, I create a new Cropper instance, but set checkCrossOrigin
to false
since I’m sure the host the image is on obeys CORS. Screenshot of instantiation:
I am setting checkCrossOrigin
to false
, because I don’t want to re-request the same image twice (waste of bandwidth and HTTP requests).
However when trying to work with the canvas, I get a tainted canvas error:
The issue is that even though the Image
object, which I add to the DOM, has a proper crossOrigin
value, it doesn’t look like the Cropper class is properly setting that in the cloned object. As can be seen here:
Expected behavior
If the image object has a crossOrigin
attribute with a valid value (in this case, anonymous
), Cropper should include that in the clone that is created to ensure the canvas can be properly accessed for pixel-level manipulation.
Minimal reproduction of the problem with instructions
See here: https://jsfiddle.net/f3m18bp4/4/
What is the motivation / use case for changing the behavior?
I believe this is a bug that is preventing Cropper from working properly, and efficiently, with CORS.
Environment
Cropper.js version: 1.4.1
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [x] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 26 (10 by maintainers)
Commits related to this issue
- docs: add more explanation for `checkCrossOrigin` option Resolved #413 — committed to fengyuanchen/cropperjs by fengyuanchen 6 years ago
@developdeez You also need to set the
checkCrossOrigin
option totrue
, and it will work fine.Try this config: