Resize refactoring to create downsized image and thumbnails in one run

src/components/import/ImportSingleFile.tsx

@@ -21,7 +21,7 @@ import {
 } from '@capacitor/filesystem';
 import piexif from 'piexifjs';
 import { getDate, getGps } from '../../lib/exif';
-import { resize } from '../../lib/image';
+import { downsize } from '../../lib/image';
 
 interface Props {
   file: File;
@@ -118,7 +118,10 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
           const id = exifObj.Exif[piexif.ExifIFD.ImageUniqueID];
           const gps = getGps(exifObj);
           const date = getDate(exifObj);
-          const thumbnailUrl = await resize(reader.result, 128);
+          const [downsizedUrl, thumbnailUrl] = await downsize(
+            reader.result,
+            [1024, 128]
+          );
           // const gps = tags.gps;
           // const image = await Image.load(reader.result);
           // const thumbnail = image.resize({

src/lib/image.ts

@@ -1,35 +1,20 @@
-export const resize = (imageUrl: string, maxSize: number) => {
+import { cloneDeep } from 'lodash';
-  let resolver = (resizedImageUrl: any) => {};
+
-  const img = document.createElement('img');
+const downsizeCanvas = (canvas: HTMLCanvasElement, maxSize: number) => {
-  img.onload = () => {
+  const currentMaxSize = Math.max(canvas.width, canvas.height);
-    const currentMaxSize = Math.max(img.width, img.height);
   const ratio = currentMaxSize / maxSize;
-    const targetWidth = img.width / ratio;
+  const targetWidth = canvas.width / ratio;
-    const targetHeight = img.height / ratio;
+  const targetHeight = canvas.height / ratio;
   const nbStepsReal = Math.log2(ratio);
   const nbSteps = Math.floor(nbStepsReal);
-
+  let width = canvas.width;
-    const canvas = document.createElement('canvas');
+  let height = canvas.height;
-    canvas.width = img.width;
-    canvas.height = img.height;
   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, canvas.width / 2, canvas.height / 2);
+    canvasCtx?.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
-      src = canvas;
-      console.log({
-        caller: 'resize',
-        width,
-        height,
-        targetHeight,
-        targetWidth,
-        i,
-      });
   }
 
   const finalCanvas = document.createElement('canvas');
@@ -48,12 +33,29 @@ export const resize = (imageUrl: string, maxSize: number) => {
     targetHeight
   );
 
-    const imageUrl = finalCanvas.toDataURL('image/jpeg');
+  return finalCanvas;
-    canvas.remove();
+};
-    finalCanvas.remove();
 
-    resolver(imageUrl);
+export const downsize = (imageUrl: string, maxSizes: number[]) => {
+  let resolver = (resizedImageUrl: any) => {};
+  const img = document.createElement('img');
+  img.onload = () => {
+    let canvas = document.createElement('canvas');
+    canvas.width = img.width;
+    canvas.height = img.height;
+    const canvasCtx = canvas.getContext('2d');
+    canvasCtx?.drawImage(img, 0, 0);
+
+    img.remove();
+
+    const canvases = maxSizes.map((maxSize: number) => {
+      canvas = downsizeCanvas(canvas, maxSize);
+      return canvas.toDataURL('image/jpeg');
+    });
+
+    resolver(canvases);
   };
+
   img.src = imageUrl;
   return new Promise((resolve, reject) => {
     resolver = resolve;