Image not completed on load leads to bad width and height calculation in fit image to container.

[phlegx]

Describe the bug Image not completed on load leads to bad width and height calculation in fit image to container.

To Reproduce Hard to reproduce but found by using uppload.

Expected behavior If image is uploaded from local and Crop is used, the function fitImageToContainer should check if the image has completely loaded first. This can be done with event listener 'load'.

/* effects/crop/index.js - Add visibility hidden. */
<div class="uppload-cropping-element">
        <img style="width: 20px; visibility: hidden;" alt="" src="${image}">
</div>

/* helpers/elements.js */
export const fitImageToContainer = (params, image) => {
  return new Promise((resolve, reject) => {
      const onCleanup = () => {
          image.removeEventListener('load', onLoad);
          image.removeEventListener('error', onError);
      };

      const onError = (error) => {
          onCleanup();
          reject(error);
      };

      const onLoad = () => {
          safeRequestAnimationFrame(() => {
              const parent = image.parentElement;
              const currentDimensions = image.getBoundingClientRect();
              if (!parent) {
                  onCleanup();
                  return;
              }
              const dimensions = parent.getBoundingClientRect();
              if (currentDimensions.height < currentDimensions.width) {
                  image.style.height = `${dimensions.height}px`;
                  image.style.width = "auto";
              }
              else {
                  image.style.width = `${dimensions.width}px`;
                  image.style.height = "auto";
              }
              safeRequestAnimationFrame(() => {
                  const currentDimensions = image.getBoundingClientRect();
                  if (currentDimensions.height > dimensions.height) {
                      image.style.height = `${dimensions.height}px`;
                      image.style.width = "auto";
                  }
                  else if (currentDimensions.width > dimensions.width) {
                      image.style.width = `${dimensions.width}px`;
                      image.style.height = "auto";
                  }
                  safeRequestAnimationFrame(() => {
                      const effect = params.uppload.container.querySelector(".uppload-effect");
                      if (effect)
                          effect.style.opacity = "1";
                      onCleanup();
                      resolve();
                  });
              });
          });
      };

      onCleanup();
      image.addEventListener('load', onLoad);
      image.addEventListener('error', onError);
      image.src = image.src; /* Reload image. */
  });
};

Desktop (please complete the following information):

• OS: all
• Browser: Firefox, Chrome, Android Webview, etc.
• Version: 3.2.1

Smartphone (please complete the following information):

• Device: Android device
• OS: Android
• Browser: all
• Version: Android 13