maybe fixed the upgrade to webp bug?

Metal079 · Sep 29, 2024 · bb03893 · bb03893
1 parent e760de6
commit bb03893
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/src/app/blob-migration.service.ts b/src/app/blob-migration.service.ts
@@ -175,28 +175,39 @@ export class BlobMigrationService {
   }
 
   async convertToWebP(blob: Blob): Promise<Blob> {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => {
-        const canvas = document.createElement('canvas');
-        canvas.width = img.width;
-        canvas.height = img.height;
-        const ctx = canvas.getContext('2d');
-        ctx!.drawImage(img, 0, 0);
-        canvas.toBlob(
-          (webpBlob) => {
-            if (webpBlob) resolve(webpBlob);
-            else reject('Conversion to WebP failed');
-          },
-          'image/webp',
-          0.95 // Quality parameter set to 95%
-        );
-      };
-      img.onerror = reject;
-      img.src = URL.createObjectURL(blob);
+    // Decode the image using createImageBitmap
+    const bitmap = await createImageBitmap(blob);
+
+    // Create a canvas with the same dimensions as the image
+    const canvas = document.createElement('canvas');
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Canvas context is null');
+    }
+
+    // Draw the image onto the canvas
+    ctx.drawImage(bitmap, 0, 0);
+
+    // Convert the canvas content to a WebP blob
+    const webpBlob = await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject('Conversion to WebP failed');
+          }
+        },
+        'image/webp',
+        0.95 // Quality parameter set to 95%
+      );
     });
+
+    return webpBlob;
   }
-
+  
   async convertWebPToPNG(webpBlob: Blob): Promise<Blob> {
     return new Promise((resolve, reject) => {
       const img = new Image();

diff --git a/src/app/home/options/options.component.ts b/src/app/home/options/options.component.ts
@@ -245,9 +245,6 @@ export class OptionsComponent implements OnInit {
                 const uuid = data.UUID;
                 const base64Data = data.base64;
 
-                // Continue the cursor immediately to keep the transaction active only for necessary operations
-                cursor.continue();
-
                 // Process the data asynchronously outside the transaction
                 (async () => {
                   let blob = null;
@@ -290,6 +287,8 @@ export class OptionsComponent implements OnInit {
                   };
                 })();
 
+                // Continue the cursor immediately to keep the transaction active only for necessary operations
+                cursor.continue();
               } else {
                 console.log("No more entries to process");
               }