[FEAT] Bug fix

src/App.vue

@@ -53,7 +53,7 @@
         <!-- Welcome state -->
         <div v-if="!visibleLayers.some(l => l.sprites.length)" class="p-6 sm:p-10">
           <div class="mb-8">
-            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload sprites</h2>
+            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload sprites or single image</h2>
             <p class="text-sm text-gray-600 dark:text-gray-400">Drag and drop images or import from JSON</p>
           </div>
           <file-uploader @upload-sprites="handleSpritesUpload" />
@@ -65,7 +65,7 @@
                 <p class="text-gray-700 dark:text-gray-300 mb-4">Create spritesheets for your game development and animation projects with our completely free, open-source Spritesheet generator.</p>
                 <p class="text-gray-700 dark:text-gray-300 mb-6">This powerful online tool lets you upload individual sprite images and automatically arrange them into optimized sprite sheets with customizable layouts - perfect for indie developers, animators, and studios of any size.</p>
                 <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Key features of this sprite editor</h3>
-                <li class="text-gray-700 dark:text-gray-300 mb-6 space-y-2">
+                <ul class="text-gray-700 dark:text-gray-300 mb-6 space-y-2">
                   <li><strong>Free sprite editor</strong>: Edit, organize, and optimize your game sprites directly in your browser</li>
                   <li><strong>Automatic spritesheet generation</strong>: Convert multiple PNG, JPG, or GIF images into efficient sprite atlases</li>
                   <li><strong>Customizable grid layouts</strong>: Adjust spacing, padding, and arrangement for pixel-perfect results</li>
@@ -74,7 +74,7 @@
                   <li><strong>Zero installation required</strong>: No downloads - use our web-based sprite sheet maker instantly</li>
                   <li><strong>Batch processing</strong>: Upload and process multiple sprites simultaneously</li>
                   <li><strong>Export options</strong>: Download spritesheet as PNG, JPG, GIF, ZIP or JSON.</li>
-                </li>
+                </ul>
                 <div>
                   <h4 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
                     <i class="fas fa-play-circle text-gray-800 dark:text-gray-200"></i>
@@ -392,20 +392,29 @@
 
     if (files.length === 1 && files[0].type.startsWith('image/')) {
       const file = files[0];
-      const url = URL.createObjectURL(file);
+      const reader = new FileReader();
+      reader.onload = e => {
+        const url = e.target?.result as string;
+        const img = new Image();
+        img.onload = () => {
+          if (confirm('This looks like it might be a spritesheet. Would you like to split it into individual sprites?')) {
+            spritesheetImageUrl.value = url;
+            spritesheetImageFile.value = file;
+            isSpritesheetSplitterOpen.value = true;
+            return;
+          }
 
-      const img = new Image();
-      img.onload = () => {
-        if (confirm('This looks like it might be a spritesheet. Would you like to split it into individual sprites?')) {
-          spritesheetImageUrl.value = url;
-          spritesheetImageFile.value = file;
-          isSpritesheetSplitterOpen.value = true;
-          return;
-        }
-
-        processImageFiles([file]);
+          processImageFiles([file]);
+        };
+        img.onerror = () => {
+          console.error('Failed to load image:', file.name);
+        };
+        img.src = url;
       };
-      img.src = url;
+      reader.onerror = () => {
+        console.error('Failed to read image file:', file.name);
+      };
+      reader.readAsDataURL(file);
       return;
     }
 
@@ -439,10 +448,12 @@
 
   const closeSpritesheetSplitter = () => {
     isSpritesheetSplitterOpen.value = false;
-    if (spritesheetImageUrl.value) {
-      URL.revokeObjectURL(spritesheetImageUrl.value);
-      spritesheetImageUrl.value = '';
+    if (spritesheetImageUrl.value && spritesheetImageUrl.value.startsWith('blob:')) {
+      try {
+        URL.revokeObjectURL(spritesheetImageUrl.value);
+      } catch {}
     }
+    spritesheetImageUrl.value = '';
     spritesheetImageFile.value = null;
   };
 

src/composables/useLayers.ts

@@ -137,37 +137,53 @@ export const useLayers = () => {
       } catch {}
     }
 
-    const url = URL.createObjectURL(file);
-    const img = new Image();
-    img.onload = () => {
-      l.sprites[i] = { id: old.id, file, img, url, width: img.width, height: img.height, x: old.x, y: old.y };
+    const reader = new FileReader();
+    reader.onload = e => {
+      const url = e.target?.result as string;
+      const img = new Image();
+      img.onload = () => {
+        l.sprites[i] = { id: old.id, file, img, url, width: img.width, height: img.height, x: old.x, y: old.y };
+      };
+      img.onerror = () => {
+        console.error('Failed to load replacement image:', file.name);
+      };
+      img.src = url;
     };
-    img.onerror = () => {
-      URL.revokeObjectURL(url);
+    reader.onerror = () => {
+      console.error('Failed to read replacement image file:', file.name);
     };
-    img.src = url;
+    reader.readAsDataURL(file);
   };
 
   const addSprite = (file: File) => {
     const l = activeLayer.value;
     if (!l) return;
-    const url = URL.createObjectURL(file);
-    const img = new Image();
-    img.onload = () => {
-      const next: Sprite = {
-        id: crypto.randomUUID(),
-        file,
-        img,
-        url,
-        width: img.width,
-        height: img.height,
-        x: 0,
-        y: 0,
+    const reader = new FileReader();
+    reader.onload = e => {
+      const url = e.target?.result as string;
+      const img = new Image();
+      img.onload = () => {
+        const next: Sprite = {
+          id: crypto.randomUUID(),
+          file,
+          img,
+          url,
+          width: img.width,
+          height: img.height,
+          x: 0,
+          y: 0,
+        };
+        l.sprites = [...l.sprites, next];
       };
-      l.sprites = [...l.sprites, next];
+      img.onerror = () => {
+        console.error('Failed to load sprite image:', file.name);
+      };
+      img.src = url;
     };
-    img.onerror = () => URL.revokeObjectURL(url);
-    img.src = url;
+    reader.onerror = () => {
+      console.error('Failed to read sprite image file:', file.name);
+    };
+    reader.readAsDataURL(file);
   };
 
   const processImageFiles = async (files: File[]) => {

src/composables/useSprites.ts

@@ -87,129 +87,157 @@ export const useSprites = () => {
     const old = sprites.value[i];
     revokeIfBlob(old.url);
 
-    const url = URL.createObjectURL(file);
-    const img = new Image();
-    img.onload = () => {
-      const next: Sprite = {
-        id: old.id,
-        file,
-        img,
-        url,
-        width: img.width,
-        height: img.height,
-        x: old.x,
-        y: old.y,
+    const reader = new FileReader();
+    reader.onload = e => {
+      const url = e.target?.result as string;
+      const img = new Image();
+      img.onload = () => {
+        const next: Sprite = {
+          id: old.id,
+          file,
+          img,
+          url,
+          width: img.width,
+          height: img.height,
+          x: old.x,
+          y: old.y,
+        };
+        const arr = [...sprites.value];
+        arr[i] = next;
+        sprites.value = arr;
       };
-      const arr = [...sprites.value];
-      arr[i] = next;
-      sprites.value = arr;
+      img.onerror = () => {
+        console.error('Failed to load replacement image:', file.name);
+      };
+      img.src = url;
     };
-    img.onerror = () => {
-      console.error('Failed to load replacement image:', file.name);
-      URL.revokeObjectURL(url);
+    reader.onerror = () => {
+      console.error('Failed to read replacement image file:', file.name);
     };
-    img.src = url;
+    reader.readAsDataURL(file);
   };
 
   const addSprite = (file: File) => {
-    const url = URL.createObjectURL(file);
-    const img = new Image();
-    img.onload = () => {
-      const s: Sprite = {
-        id: crypto.randomUUID(),
-        file,
-        img,
-        url,
-        width: img.width,
-        height: img.height,
-        x: 0,
-        y: 0,
+    const reader = new FileReader();
+    reader.onload = e => {
+      const url = e.target?.result as string;
+      const img = new Image();
+      img.onload = () => {
+        const s: Sprite = {
+          id: crypto.randomUUID(),
+          file,
+          img,
+          url,
+          width: img.width,
+          height: img.height,
+          x: 0,
+          y: 0,
+        };
+        sprites.value = [...sprites.value, s];
       };
-      sprites.value = [...sprites.value, s];
+      img.onerror = () => {
+        console.error('Failed to load new sprite image:', file.name);
+      };
+      img.src = url;
     };
-    img.onerror = () => {
-      console.error('Failed to load new sprite image:', file.name);
-      URL.revokeObjectURL(url);
+    reader.onerror = () => {
+      console.error('Failed to read sprite image file:', file.name);
     };
-    img.src = url;
+    reader.readAsDataURL(file);
   };
 
   const addSpriteWithResize = (file: File) => {
-    const url = URL.createObjectURL(file);
-    const img = new Image();
-    img.onload = () => {
-      const { maxWidth, maxHeight } = getMaxDimensions(sprites.value);
+    const reader = new FileReader();
+    reader.onload = e => {
+      const url = e.target?.result as string;
+      const img = new Image();
+      img.onload = () => {
+        const { maxWidth, maxHeight } = getMaxDimensions(sprites.value);
 
-      const newSprite: Sprite = {
-        id: crypto.randomUUID(),
-        file,
-        img,
-        url,
-        width: img.width,
-        height: img.height,
-        x: 0,
-        y: 0,
+        const newSprite: Sprite = {
+          id: crypto.randomUUID(),
+          file,
+          img,
+          url,
+          width: img.width,
+          height: img.height,
+          x: 0,
+          y: 0,
+        };
+
+        const newMaxWidth = Math.max(maxWidth, img.width);
+        const newMaxHeight = Math.max(maxHeight, img.height);
+
+        if (img.width > maxWidth || img.height > maxHeight) {
+          sprites.value = sprites.value.map(sprite => {
+            let newX = sprite.x;
+            let newY = sprite.y;
+
+            if (img.width > maxWidth) {
+              const relativeX = maxWidth > 0 ? sprite.x / maxWidth : 0;
+              newX = Math.floor(relativeX * newMaxWidth);
+              newX = Math.max(0, Math.min(newX, newMaxWidth - sprite.width));
+            }
+
+            if (img.height > maxHeight) {
+              const relativeY = maxHeight > 0 ? sprite.y / maxHeight : 0;
+              newY = Math.floor(relativeY * newMaxHeight);
+              newY = Math.max(0, Math.min(newY, newMaxHeight - sprite.height));
+            }
+
+            return { ...sprite, x: newX, y: newY };
+          });
+        }
+
+        sprites.value = [...sprites.value, newSprite];
+        triggerForceRedraw();
       };
-
-      const newMaxWidth = Math.max(maxWidth, img.width);
-      const newMaxHeight = Math.max(maxHeight, img.height);
-
-      if (img.width > maxWidth || img.height > maxHeight) {
-        sprites.value = sprites.value.map(sprite => {
-          let newX = sprite.x;
-          let newY = sprite.y;
-
-          if (img.width > maxWidth) {
-            const relativeX = maxWidth > 0 ? sprite.x / maxWidth : 0;
-            newX = Math.floor(relativeX * newMaxWidth);
-            newX = Math.max(0, Math.min(newX, newMaxWidth - sprite.width));
-          }
-
-          if (img.height > maxHeight) {
-            const relativeY = maxHeight > 0 ? sprite.y / maxHeight : 0;
-            newY = Math.floor(relativeY * newMaxHeight);
-            newY = Math.max(0, Math.min(newY, newMaxHeight - sprite.height));
-          }
-
-          return { ...sprite, x: newX, y: newY };
-        });
-      }
-
-      sprites.value = [...sprites.value, newSprite];
-      triggerForceRedraw();
+      img.onerror = () => {
+        console.error('Failed to load new sprite image:', file.name);
+      };
+      img.src = url;
     };
-    img.onerror = () => {
-      console.error('Failed to load new sprite image:', file.name);
-      URL.revokeObjectURL(url);
+    reader.onerror = () => {
+      console.error('Failed to read sprite image file:', file.name);
     };
-    img.src = url;
+    reader.readAsDataURL(file);
   };
 
   const processImageFiles = (files: File[]) => {
     Promise.all(
       files.map(
         file =>
-          new Promise<Sprite>(resolve => {
-            const url = URL.createObjectURL(file);
-            const img = new Image();
-            img.onload = () => {
-              resolve({
-                id: crypto.randomUUID(),
-                file,
-                img,
-                url,
-                width: img.width,
-                height: img.height,
-                x: 0,
-                y: 0,
-              });
+          new Promise<Sprite>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = e => {
+              const url = e.target?.result as string;
+              const img = new Image();
+              img.onload = () => {
+                resolve({
+                  id: crypto.randomUUID(),
+                  file,
+                  img,
+                  url,
+                  width: img.width,
+                  height: img.height,
+                  x: 0,
+                  y: 0,
+                });
+              };
+              img.onerror = () => reject(new Error(`Failed to load image: ${file.name}`));
+              img.src = url;
             };
-            img.src = url;
+            reader.onerror = () => reject(new Error(`Failed to read file: ${file.name}`));
+            reader.readAsDataURL(file);
           })
       )
-    ).then(newSprites => {
-      sprites.value = [...sprites.value, ...newSprites];
-    });
+    )
+      .then(newSprites => {
+        sprites.value = [...sprites.value, ...newSprites];
+      })
+      .catch(err => {
+        console.error('Error processing image files:', err);
+      });
   };
 
   onUnmounted(() => {