blueimp/JavaScript-Load-Image

loadImage.scale maxHeight problem

JaegerFlorian opened this issue · 3 comments

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!

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: 0e43714

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?

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

Closing this due to no response.