Fix scale slider

electron/index.ts

@@ -565,28 +565,35 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
       failed = true;
       return;
     };
-    const onClose = () => {
+    const onClose = async () => {
       if (!failed && !stopped) {
         logit("💯 Done upscaling");
         logit("♻ Scaling and converting now...");
-        Jimp.read(
-          isAlpha ? outFile + ".png" : outFile,
-          (err: any, image: any) => {
-            if (err) {
-              logit("❌ Error converting to PNG: ", err);
-              onError(err);
-              return;
-            }
-            image
-              .scale(parseInt(payload.scale as string))
+        const originalImage = await Jimp.read(inputDir + slash + fullfileName);
+        try {
+          const newImage = await Jimp.read(
+            isAlpha ? outFile + ".png" : outFile
+          );
+          try {
+            newImage
+              .scaleToFit(
+                originalImage.getWidth() * parseInt(payload.scale),
+                originalImage.getHeight() * parseInt(payload.scale)
+              )
               .write(isAlpha ? outFile + ".png" : outFile);
             mainWindow.setProgressBar(-1);
             mainWindow.webContents.send(
               commands.UPSCAYL_DONE,
               isAlpha ? outFile + ".png" : outFile
             );
+          } catch (error) {
+            logit("❌ Error converting to PNG: ", error);
+            onError(error);
           }
-        );
+        } catch (error) {
+          logit("❌ Error reading original image metadata", error);
+          onError(error);
+        }
       }
     };
 

renderer/components/settings-tab/DonateButton.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 export function DonateButton({}) {
   return (
-    <div className="mt-auto flex flex-col items-center justify-center gap-2 text-sm font-medium">
+    <div className="flex flex-col gap-2 text-sm font-medium">
       <p>If you like what we do :)</p>
-      <a href="https://buymeacoffee.com/fossisthefuture" target="_blank">
-        <button className="btn-primary btn">Donate</button>
+      <a
+        href="https://buymeacoffee.com/fossisthefuture"
+        target="_blank"
+        className="btn-primary btn">
+        Donate
       </a>
     </div>
   );

renderer/components/settings-tab/ImageScaleSelect.tsx

@@ -20,7 +20,7 @@ export function ImageScaleSelect({ scale, setScale }: ImageScaleSelectProps) {
       </div>
       <input
         type="range"
-        min="2"
+        min="1"
         max="4"
         value={scale}
         onChange={(e: any) => {
@@ -30,22 +30,11 @@ export function ImageScaleSelect({ scale, setScale }: ImageScaleSelectProps) {
         className="range range-primary mt-2"
       />
       <div className="flex w-full justify-between px-2 text-xs font-semibold text-base-content">
+        <span>1x</span>
         <span>2x</span>
         <span>3x</span>
         <span>4x</span>
       </div>
-      {scale !== "4" && (
-        <p className="mt-1 text-center text-xs text-base-content/70">
-          This may generate unexpected output!
-          <br />
-          <a
-            className="link"
-            href="https://github.com/upscayl/upscayl/wiki/Guide#scale-option"
-            target="_blank">
-            See Wiki
-          </a>
-        </p>
-      )}
     </div>
   );
 }

renderer/components/settings-tab/index.tsx

@@ -128,12 +128,16 @@ function SettingsTab({
 
   return (
     <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
-      <a
-        className="btn-primary btn"
-        href="https://github.com/upscayl/upscayl/wiki/"
-        target="_blank">
-        Read WIKI
-      </a>
+      <div className="flex flex-col gap-2 text-sm font-medium">
+        <p>Having issues?</p>
+        <a
+          className="btn-primary btn"
+          href="https://github.com/upscayl/upscayl/wiki/"
+          target="_blank">
+          Read Wiki Guide
+        </a>
+        <DonateButton />
+      </div>
 
       {/* THEME SELECTOR */}
       <ThemeSelect />
@@ -167,9 +171,6 @@ function SettingsTab({
         isCopied={isCopied}
         logData={logData}
       />
-
-      {/* DONATE BUTTON */}
-      <DonateButton />
     </div>
   );
 }