Improve image loading

Author: sylhare

src/utils/imagePreprocess.ts

@@ -54,7 +54,7 @@ export async function preprocessImage(file: File): Promise<HTMLCanvasElement> {
     img.onload = () => resolve(img);
     img.onerror = reject;
     img.src = blobUrl;
-  });
+  }).finally(() => URL.revokeObjectURL(blobUrl));
 
   const src = cv.imread(imageEl);
 
@@ -99,7 +99,6 @@ export async function preprocessImage(file: File): Promise<HTMLCanvasElement> {
   src.delete();
   scaled.delete();
   bin.delete();
-  URL.revokeObjectURL(blobUrl);
 
   return outCanvas;
 }

src/utils/opencvLoader.ts

@@ -1,12 +1,11 @@
 let cachedCv: any = null;
+let inFlight: Promise<any> | null = null;
 
 function isPromiseInstance(obj: any): obj is Promise<any> {
   return obj instanceof Promise;
 }
 
-export async function loadOpenCV(): Promise<any> {
-  if (cachedCv) return cachedCv;
-
+async function importOpenCV(): Promise<any> {
   const mod: any = await import('@techstark/opencv-js');
   const cvCandidate: any = mod?.default ?? mod;
 
@@ -34,4 +33,17 @@ export async function loadOpenCV(): Promise<any> {
   cachedCv = cv;
 
   return cachedCv;
+}
+
+export async function loadOpenCV(): Promise<any> {
+  if (cachedCv) return cachedCv;
+  if (inFlight) return inFlight;
+
+  inFlight = importOpenCV();
+
+  try {
+    return await inFlight;
+  } finally {
+    inFlight = null;
+  }
 }