Open ghost opened 4 years ago
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?
Hi Sebastian , thank u for your answer, it happens to us on latest Chrome Browser v86 both on Desktop and Mobile devices ☹
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
thanx Sebastian, i have submitted a bug report https://bugs.chromium.org/p/chromium/issues/detail?id=1153003
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})