From e634d13ee580b1304faeaa5799c248c9c701656e Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Fri, 21 Apr 2023 21:23:32 +0200
Subject: [PATCH] Imageresizing using a canvas

---
 src/lib/image.ts | 37 +++++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/lib/image.ts b/src/lib/image.ts
index 90f34ed..fae1945 100644
--- a/src/lib/image.ts
+++ b/src/lib/image.ts
@@ -4,13 +4,14 @@ export const resize = (imageUrl: string, maxSize: number) => {
   img.onload = () => {
     const currentMaxSize = Math.max(img.width, img.height);
     const ratio = currentMaxSize / maxSize;
+    const targetWidth = img.width / ratio;
+    const targetHeight = img.height / ratio;
     const nbStepsReal = Math.log2(ratio);
     const nbSteps = Math.floor(nbStepsReal);
-    const reminder = maxSize - currentMaxSize / 2 ** nbSteps;
 
     const canvas = document.createElement('canvas');
-    canvas.width = img.width / 2;
-    canvas.height = img.height / 2;
+    canvas.width = img.width;
+    canvas.height = img.height;
     const canvasCtx = canvas.getContext('2d');
 
     let src: any = img;
@@ -19,27 +20,39 @@ export const resize = (imageUrl: string, maxSize: number) => {
     for (let i = 0; i < nbSteps; i++) {
       width = width / 2;
       height = height / 2;
-      canvasCtx?.drawImage(src, 0, 0, width, height);
+      canvasCtx?.drawImage(src, 0, 0, canvas.width / 2, canvas.height / 2);
       src = canvas;
+      console.log({
+        caller: 'resize',
+        width,
+        height,
+        targetHeight,
+        targetWidth,
+        i,
+      });
     }
 
     const finalCanvas = document.createElement('canvas');
-    finalCanvas.height = height;
-    finalCanvas.width = width;
+    finalCanvas.height = targetHeight;
+    finalCanvas.width = targetWidth;
     const finalCanvasCtx = finalCanvas.getContext('2d');
     finalCanvasCtx?.drawImage(
       canvas,
       0,
       0,
-      width * 4,
-      height * 4,
-      0,
-      0,
       width,
-      height
+      height,
+      0,
+      0,
+      targetWidth,
+      targetHeight
     );
 
-    resolver(finalCanvas.toDataURL('image/jpeg'));
+    const imageUrl = finalCanvas.toDataURL('image/jpeg');
+    canvas.remove();
+    finalCanvas.remove();
+
+    resolver(imageUrl);
   };
   img.src = imageUrl;
   return new Promise((resolve, reject) => {