-
-
Notifications
You must be signed in to change notification settings - Fork 920
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
Comments
I can confirm that there seems to be an issue with the canvas drawing operation when tested under Chrome on the demo. |
Hi Sebastian , |
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: If you can also reproduce this with the above test code, I suggest you submit a bug report to the Chromium bug tracker: |
thanx Sebastian, |
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? |
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})
The text was updated successfully, but these errors were encountered: