Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sometimes after crop white color not white #1072

Open
g-rodigy opened this issue May 17, 2023 · 7 comments
Open

Sometimes after crop white color not white #1072

g-rodigy opened this issue May 17, 2023 · 7 comments

Comments

@g-rodigy
Copy link

g-rodigy commented May 17, 2023

Describe the bug
Sometimes after crop white color not white, it depends on the position crop area. It happens on all images with white color(maybe not only white, but on white color it more noticeably) only on chrome browser.

To Reproduce

const cropper = new cropperjs(document.getElementById('source'), {
  aspectRatio: 1,
  ready: function() {
    this.cropper.setCropBoxData({
      left: 72,
      top: 18,
      width: 250,
      height: 250,
    })
    
    crop()
  }
})

function crop() {
  document.getElementById('preview').src = cropper.getCroppedCanvas({
    imageSmoothingEnabled: true,
    imageSmoothingQuality: 'high',
    fillColor: '#fff',
  }).toDataURL()
}

document.getElementById('save').onclick = crop

https://codepen.io/rodigy/pen/abRRmQq

Expected behavior
White color not chaged.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser Chrome
  • Version 113

Additional context
Tested on firefox, work fine

@fengyuanchen
Copy link
Owner

Can you provide some screenshots?

@g-rodigy
Copy link
Author

g-rodigy commented May 26, 2023

Source image
kiwi_001

Chrome
image
image

Firefox
image

@fengyuanchen
Copy link
Owner

How about cropper.getCroppedCanvas().toDataURL('image/jpeg')?

@g-rodigy
Copy link
Author

No, the same with image/jpeg or image/png or image/webp

@fengyuanchen
Copy link
Owner

I have no idea about this right now...

@g-rodigy
Copy link
Author

g-rodigy commented Jun 3, 2023

Later I do some tests, it maybe not a bug cropper, only browser.

@dymarchyk
Copy link

have same issue. image type "image/png" results in replacing transparent pixels to black

kraktus added a commit to kraktus/lila that referenced this issue Jul 28, 2024
fix lichess-org#15782

There are various bug/issues related to the cropperjs lib with transparency

fengyuanchen/cropperjs#551
fengyuanchen/cropperjs#1072

so had to bypass it and keep the original image.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants