From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Wed, 18 Dec 2024 10:59:15 +0000 (+0100)
Subject: Find the exact size for the image or use the minimum size for the image
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c9726adcce8c7c5e400ecff8dc83323cdddf8ef9;p=GitHub%2FWoltLab%2FWCF.git

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 8212edbefe..5ff0cb49bd 100644
--- 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 06c2cf3796..4fd299bde8 100644
--- 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