search

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

How are maxWidth and maxHeight supposed to work? #150

Open derwaldgeist opened 3 months ago

derwaldgeist commented 3 months ago

If I am calling loadImage with maxWidth = 1024, maxHeigth = 1024, I would expect that the neither the width nor the height exceed 1024. Instead, the library seems to set the shorter length to 1024, so the other can exceed its max value. Also, the library stretches the image even if it is smaller.

As an example, I have an input image that is 3560x942. The resulting image is 3869x1024, which is even bigger than the original, and the width is over 3x larger than the maxWidth.

This also happens if I set the maxHeight to 1024 only, i.e. without a maxWidth.

I would expect that maxWidth and maxHeight are maximum values, not minimum values?

tyrex1975 commented 1 month ago

No issues with that here. I call loadImage with maxWidth=100 and maxHeight=100 and always get a thumbnail that's never larger than 100 pixels in any direction, and always proportioned in the same ratios of the original image.

Can you post your code?

derwaldgeist commented 1 month ago

Thanks for your response. I learned in the meantime that this only happens if you set cover to true. Yet I am still wondering why this flag overrides the maxWidth / maxHeight settings?

tyrex1975 commented 1 month ago

Yes, your 3869x1024 resulting image is correct according to the code in: https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-scale.js (search for cover and follow the scaleUp and scaledown calcuations)

Not sure what the intention was by the author. As a workaround I'd probably just avoid the cover: true parameter and let load-image return a ratio-correct image, and then stretch it in the displayed version.

derwaldgeist commented 1 month ago

Yes, that's what I am doing right now.