JavaScript-Load-Image icon indicating copy to clipboard operation
JavaScript-Load-Image copied to clipboard

Image is blacked out after resize

Open ghost opened this issue 5 years ago • 5 comments

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

ghost avatar Nov 10 '20 08:11 ghost

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?

blueimp avatar Nov 14 '20 09:11 blueimp

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

ghost avatar Nov 14 '20 09:11 ghost

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

blueimp avatar Nov 14 '20 15:11 blueimp

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

ghost avatar Nov 26 '20 08:11 ghost

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?

dansoper avatar May 24 '21 10:05 dansoper