Attempt to scale using a canvas element

src/lib/image.ts

@@ -0,0 +1,48 @@
+export const resize = (imageUrl: string, maxSize: number) => {
+  let resolver = (resizedImageUrl: any) => {};
+  const img = document.createElement('img');
+  img.onload = () => {
+    const currentMaxSize = Math.max(img.width, img.height);
+    const ratio = currentMaxSize / maxSize;
+    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;
+    const canvasCtx = canvas.getContext('2d');
+
+    let src: any = img;
+    let width = img.width;
+    let height = img.height;
+    for (let i = 0; i < nbSteps; i++) {
+      width = width / 2;
+      height = height / 2;
+      canvasCtx?.drawImage(src, 0, 0, width, height);
+      src = canvas;
+    }
+
+    const finalCanvas = document.createElement('canvas');
+    finalCanvas.height = height;
+    finalCanvas.width = width;
+    const finalCanvasCtx = finalCanvas.getContext('2d');
+    finalCanvasCtx?.drawImage(
+      canvas,
+      0,
+      0,
+      width * 4,
+      height * 4,
+      0,
+      0,
+      width,
+      height
+    );
+
+    resolver(finalCanvas.toDataURL('image/jpeg'));
+  };
+  img.src = imageUrl;
+  return new Promise((resolve, reject) => {
+    resolver = resolve;
+  });
+};