Find the exact size for the image or use the minimum size for the image

diff --git a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
index 8212edbefeb3d0a1385899c05f4464a9927a76ef..5ff0cb49bd25ab2e104e4b4a0bfd0e921ae18d13 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
+++ b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
@@ -319,6 +319,29 @@ class ExactImageCropper extends ImageCropper {
     return super.showDialog();
   }
 
+  protected getCanvas(): Promise<HTMLCanvasElement> {
+    // Calculate the size of the image in relation to the window size
+    const selectionRatio = Math.min(
+      this.cropperCanvasRect!.width / this.width,
+      this.cropperCanvasRect!.height / this.height,
+    );
+    const width = this.cropperSelection!.width / selectionRatio;
+    const height = width / this.configuration.aspectRatio;
+
+    const sizes = this.configuration.sizes
+      .filter((size) => {
+        return width >= size.width && height >= size.height;
+      })
+      .reverse();
+
+    const size = sizes.length > 0 ? sizes[0] : this.minSize;
+
+    return this.cropperSelection!.$toCanvas({
+      width: size.width,
+      height: size.height,
+    });
+  }
+
   public async loadImage(): Promise<void> {
     await super.loadImage();
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
index 06c2cf3796899abde816d68a2f929196731a98da..4fd299bde87e21bfcb8c77fb65c4be648b79f16e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
@@ -230,6 +230,22 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Image/Resizer", "WoltL
             }
             return super.showDialog();
         }
+        getCanvas() {
+            // Calculate the size of the image in relation to the window size
+            const selectionRatio = Math.min(this.cropperCanvasRect.width / this.width, this.cropperCanvasRect.height / this.height);
+            const width = this.cropperSelection.width / selectionRatio;
+            const height = width / this.configuration.aspectRatio;
+            const sizes = this.configuration.sizes
+                .filter((size) => {
+                return width >= size.width && height >= size.height;
+            })
+                .reverse();
+            const size = sizes.length > 0 ? sizes[0] : this.minSize;
+            return this.cropperSelection.$toCanvas({
+                width: size.width,
+                height: size.height,
+            });
+        }
         async loadImage() {
             await super.loadImage();
             const sizes = this.configuration.sizes