blueimp / JavaScript-Load-Image

Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.
https://blueimp.github.io/JavaScript-Load-Image/
MIT License
4.45k stars 922 forks source link

Image is blacked out after resize #127

Open ghost opened 4 years ago

ghost commented 4 years ago

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 commented 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?

ghost commented 4 years ago

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

blueimp commented 4 years ago

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 commented 4 years ago

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

dansoper commented 3 years ago

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?