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

Most upvoted comments

@developdeez You also need to set the checkCrossOrigin option to true, and it will work fine.

Try this config:

<img src="path/to/cross/origin/image" crossorigin>
new Cropper(image, {
  checkCrossOrigin: true,
  checkOrientation: false,
});