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

loadImage.scale maxHeight problem #115

Closed JaegerFlorian closed 4 years ago

JaegerFlorian commented 4 years ago

I use this code to rescale my uploaded Image:

const scaledImage = loadImage.scale(img, {
            maxWidth: innerWidth,
            maxHeight: innerHeight,
            downsamplingRatio: 0.2,
            pixelRatio: window.devicePixelRatio,
            imageSmoothingEnabled: true,
            imageSmoothingQuality: 'high',
            canvas: true,
          });
console.log(scaledImage);

In this case the innerHeight is the same as window.innerHeight. When I rescale an image in version 5.10.0 and below, which height is greater than the innerHeight, the output looks like this: version_5_10 If I execute the exact same code and use the same picture in the versions 5.11.0 or 5.12.0 I get this output: version_5_11 Because I use scaledImage.style.height as the height for my canvas it doesn't work on the latest released versions. It still appears and looks stretched because I implemented the height to be scaledImage.height if scaledImage.style.height is not defined but because of this the image gets stretched.

At last, I still wanted to thank you for providing this package, it already saved me quite a lot of time!

blueimp commented 4 years ago

Hi @JaegerFlorian, thanks for this detailed report.

The decision to omit defining style.height and only set style.width was deliberate, as it allows for responsive images, since browsers respect the original aspect ratio by default.

So if your design sets something like max-width: 100% on img elements (e.g. like the demo styles), the image will adjust to the surrounding container.

The specific commit which changed to this behavior was this one: https://github.com/blueimp/JavaScript-Load-Image/commit/0e43714022a46895d22e4639b8fdd0b3ccd62164

If you rely on style.height, you could apply it manually based on the given window.devicePixelRatio and img.width. Though I'm curious, is there a specific reason you rely on the style.height that would not be better suited by relying on style.width only?

blueimp commented 4 years ago

Hey @JaegerFlorian, any further comments on this one or can we close it?

blueimp commented 4 years ago

Closing this due to no response.