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

Image is blacked out after resize #127

Open
ghost opened this issue Nov 10, 2020 · 5 comments
Open

Image is blacked out after resize #127

ghost opened this issue Nov 10, 2020 · 5 comments

Comments

@ghost
Copy link

ghost commented Nov 10, 2020

Sometimes there are jpg images that I change their size, and i got blacked out images afterwards.
example jpg is attached,
try to resize it as follows:
loadImage(reader.result, { maxWidth : 1280, canvas : true, orientation : true, meta : true})

2323

@blueimp
Copy link
Owner

blueimp commented Nov 14, 2020

I can confirm that there seems to be an issue with the canvas drawing operation when tested under Chrome on the demo.
Interestingly, I could not reproduce any issues with the demo on Firefox or Safari.
Could you please confirm with which browser version you encounter this and if you can reproduce these issues on the demo?

@ghost
Copy link
Author

ghost commented Nov 14, 2020

Hi Sebastian ,
thank u for your answer,
it happens to us on latest Chrome Browser v86 both on Desktop and Mobile devices ☹

@blueimp
Copy link
Owner

blueimp commented Nov 14, 2020

Unfortunately this seems to be a bug in Chrome, as I can reproduce this issue with the following minimal test code with your sample image as input:

<input type="file" id="file">
<script>
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const file = document.getElementById('file')
file.addEventListener('change', e => {
  const image = document.createElement('img');
  image.addEventListener('load', e => {
    canvas.width = image.width
    canvas.height = image.height
    ctx.drawImage(image, 0, 0);
    document.body.appendChild(canvas)
  });
  image.src = URL.createObjectURL(event.target.files[0])
})
// Styles for better visibility, not required for the minimal test case:
canvas.style.maxWidth = '100%'
canvas.style.background = 'black'
</script>

I could not reproduce the issue when using the image URL directly, it seems to have something to do with images created from Blob URLs in Chrome.

You can reproduce it yourself with the following JSFiddle demo:
https://jsfiddle.net/j74g60tz/

If you can also reproduce this with the above test code, I suggest you submit a bug report to the Chromium bug tracker:
https://bugs.chromium.org/p/chromium/issues/list

@ghost
Copy link
Author

ghost commented Nov 26, 2020

thanx Sebastian,
i have submitted a bug report
https://bugs.chromium.org/p/chromium/issues/detail?id=1153003

@dansoper
Copy link

I've been following this Issue, as it was affecting me too. As I've commented on the Chromium bug, I think it might now be fixed - can anyone else confirm?

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

2 participants