Skip to content

Commit 22fcdb5

Browse files
committed
Find the exact size for the image or use the minimum size for the image
1 parent 4a2d461 commit 22fcdb5

File tree

2 files changed

+39
-0
lines changed
  • ts/WoltLabSuite/Core/Component/Image
  • wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image

2 files changed

+39
-0
lines changed

ts/WoltLabSuite/Core/Component/Image/Cropper.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,29 @@ class ExactImageCropper extends ImageCropper {
319319
return super.showDialog();
320320
}
321321

322+
protected getCanvas(): Promise<HTMLCanvasElement> {
323+
// Calculate the size of the image in relation to the window size
324+
const selectionRatio = Math.min(
325+
this.cropperCanvasRect!.width / this.width,
326+
this.cropperCanvasRect!.height / this.height,
327+
);
328+
const width = this.cropperSelection!.width / selectionRatio;
329+
const height = width / this.configuration.aspectRatio;
330+
331+
const sizes = this.configuration.sizes
332+
.filter((size) => {
333+
return width >= size.width && height >= size.height;
334+
})
335+
.reverse();
336+
337+
const size = sizes.length > 0 ? sizes[0] : this.minSize;
338+
339+
return this.cropperSelection!.$toCanvas({
340+
width: size.width,
341+
height: size.height,
342+
});
343+
}
344+
322345
public async loadImage(): Promise<void> {
323346
await super.loadImage();
324347

wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)