From b97c90612852852ddd3654812f1dc77fe1927019 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Thu, 3 Aug 2023 15:49:01 +0530
Subject: [PATCH] Fix a bug where setting an initial image would mess up the
 width and height field

---
 ui/media/js/main.js                           |  1 +
 .../ui/image-editor-improvements.plugin.js    | 30 ++++---------------
 2 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 568ab0dc..319e5861 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -2162,6 +2162,7 @@ function checkRandomSeed() {
 randomSeedField.addEventListener("input", checkRandomSeed)
 checkRandomSeed()
 
+// warning: the core plugin `image-editor-improvements.js:172` replaces loadImg2ImgFromFile() with a custom version
 function loadImg2ImgFromFile() {
     if (initImageSelector.files.length === 0) {
         return
diff --git a/ui/plugins/ui/image-editor-improvements.plugin.js b/ui/plugins/ui/image-editor-improvements.plugin.js
index 7435df8b..aededb8d 100644
--- a/ui/plugins/ui/image-editor-improvements.plugin.js
+++ b/ui/plugins/ui/image-editor-improvements.plugin.js
@@ -124,35 +124,17 @@
         // Draw the image with centered coordinates
         context.drawImage(imageObj, x, y, this.width, this.height);
 
-        initImagePreview.src = canvas.toDataURL('image/png');
+        let bestWidth = maxCroppedWidth - maxCroppedWidth % 8
+        let bestHeight = maxCroppedHeight - maxCroppedHeight % 8
 
-        // Get the options from widthField and heightField
-        const widthOptions = Array.from(widthField.options).map(option => parseInt(option.value));
-        const heightOptions = Array.from(heightField.options).map(option => parseInt(option.value));
-
-        // Find the closest aspect ratio and closest to original dimensions
-        let bestWidth = widthOptions[0];
-        let bestHeight = heightOptions[0];
-        let minDifference = Math.abs(maxCroppedWidth / maxCroppedHeight - bestWidth / bestHeight);
-        let minDistance = Math.abs(maxCroppedWidth - bestWidth) + Math.abs(maxCroppedHeight - bestHeight);
-
-        for (const width of widthOptions) {
-            for (const height of heightOptions) {
-                const difference = Math.abs(maxCroppedWidth / maxCroppedHeight - width / height);
-                const distance = Math.abs(maxCroppedWidth - width) + Math.abs(maxCroppedHeight - height);
-
-                if (difference < minDifference || (difference === minDifference && distance < minDistance)) {
-                    minDifference = difference;
-                    minDistance = distance;
-                    bestWidth = width;
-                    bestHeight = height;
-                }
-            }
-        }
+        addImageSizeOption(bestWidth)
+        addImageSizeOption(bestHeight)
 
         // Set the width and height to the closest aspect ratio and closest to original dimensions
         widthField.value = bestWidth;
         heightField.value = bestHeight;
+
+        initImagePreview.src = canvas.toDataURL('image/png');
     };
     
 	function handlePaste(e) {