Wide images do not fit inside viewbox

[jamesharrisatconnexian]

I am having an issue trying to crop wide images or images that are smaller than the viewbox. I discovered it really comes down to aspect ratios and the min zoom not allowing the entire image to fit within the viewbox therefore wide images that are not very high cannot be accurately cropped.

I believe it to be this line causing the issue

const minZoom = Math.max(vpData.width / img.naturalWidth, vpData.height / img.naturalHeight);

I have managed to implement a work around by calculating if the image will fit inside the box and scaling the view-box based on aspect ratios which seems to work but I feel should not be required.

To reproduce, please try cropping an image that is say 10:1 ratio with a view-box set to 300 x 150. The issue is present for any image that is either very wide or smaller than the view-box which causes it to zoom erratically.

My temp fix external to this plugin was to do something like this

            const dimensions = await fileUpload.getImageDimensions(image);
            const aspectRatio = dimensions.width / dimensions.height;
            const maxViewportHeight = 250;
            const viewportWidth = maxViewportHeight * aspectRatio;
            const willFitInsideBox = dimensions.width < 350 && dimensions.height < 250;
            const viewportHeight = Math.min(viewportWidth, 350) / aspectRatio;

Btw I love the code you have written, one of the cleanest and modern HTML / JS packages out there, very rare to see modern JS and HTML being used correctly these days, great work!

[baranowskyi]

I have a similar problem. When an image is larger than a certain size, the viewport calculates the height incorrectly and crops the image incorrectly. I have attached an example where the image is 8000x6000 pixels and when I zoom in, you can see how it is cropped at the top.