Merge pull request #45 from openpatch/copilot/investigate-image-compression

mikebarkmin · web-flow · commit b3c7a2d9b849 · 2025-11-04T22:12:24.000+01:00
Add browser-based image compression and 413 error handling
diff --git a/.changeset/image-compression-and-413-handling.md b/.changeset/image-compression-and-413-handling.md
@@ -0,0 +1,12 @@
+---
+"@learningmap/learningmap": patch
+"@learningmap/web-component": patch
+---
+
+Add browser-based image compression and 413 error handling
+
+- Compress uploaded images automatically using Canvas API (resize to max 1920x1920px, convert to JPEG at 0.85 quality)
+- Add support for JPG, PNG, WebP, and SVG file formats
+- Detect HTTP 413 (Payload Too Large) responses and show user-friendly error message
+- Add translations for file size error in English and German
+- Typical file size reduction: 70-90% for raster images
diff --git a/docs/book/changelog.md b/docs/book/changelog.md
@@ -39,6 +39,28 @@ If you need a new feature, open an [issue](https://github.com/openpatch/learning
 ::::
 -->
 
+## v0.2.2
+
+::::tabs
+
+:::tab{title="New :rocket:" id="new"}
+
+- Add browser-based image compression for uploaded images to reduce file size by 70-90%
+- Add support for WebP image format (JPG, PNG, WebP, and SVG now supported)
+
+:::
+
+:::tab{title="Improved :+1:" id="improved"}
+
+- Automatically resize images to max 1920x1920px while maintaining aspect ratio
+- Convert raster images to JPEG format for optimal compression
+- Detect HTTP 413 (Payload Too Large) errors and show user-friendly message
+- Add translations for file size error in English and German
+
+:::
+
+::::
+
 ## v0.2.1
 
 ::::tabs
diff --git a/packages/learningmap/src/EditorDrawerImageContent.tsx b/packages/learningmap/src/EditorDrawerImageContent.tsx
@@ -8,29 +8,118 @@ interface Props {
   language?: string;
 }
 
+/**
+ * Compress an image file using the Canvas API.
+ * Resizes the image to fit within maxWidth x maxHeight while maintaining aspect ratio.
+ * PNG images are converted to JPEG for better compression.
+ * 
+ * @param file - The image file to compress
+ * @param maxWidth - Maximum width in pixels (default: 1920)
+ * @param maxHeight - Maximum height in pixels (default: 1920)
+ * @param quality - JPEG compression quality from 0 to 1 (default: 0.85)
+ * @returns Promise that resolves to a base64 data URL of the compressed image
+ * @throws Error if image loading or canvas operations fail
+ */
+async function compressImage(file: File, maxWidth: number = 1920, maxHeight: number = 1920, quality: number = 0.85): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    
+    reader.onload = (e) => {
+      const img = new Image();
+      
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        let width = img.width;
+        let height = img.height;
+        
+        // Calculate new dimensions while maintaining aspect ratio
+        if (width > maxWidth || height > maxHeight) {
+          const aspectRatio = width / height;
+          if (width > height) {
+            width = maxWidth;
+            height = maxWidth / aspectRatio;
+          } else {
+            height = maxHeight;
+            width = maxHeight * aspectRatio;
+          }
+        }
+        
+        canvas.width = width;
+        canvas.height = height;
+        
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          reject(new Error('Failed to get canvas context'));
+          return;
+        }
+        
+        ctx.drawImage(img, 0, 0, width, height);
+        
+        // Convert all raster images to JPEG for consistent compression
+        // JPEG provides good quality at significantly smaller file sizes
+        const dataUrl = canvas.toDataURL('image/jpeg', quality);
+        
+        resolve(dataUrl);
+      };
+      
+      img.onerror = () => {
+        reject(new Error('Failed to load image'));
+      };
+      
+      img.src = e.target?.result as string;
+    };
+    
+    reader.onerror = () => {
+      reject(new Error('Failed to read file'));
+    };
+    
+    reader.readAsDataURL(file);
+  });
+}
+
 export function EditorDrawerImageContent({ localNode, handleFieldChange, language = "en" }: Props) {
   const t = getTranslations(language);
   
-  // Convert file to base64 and update node data
+  // Convert file to base64 with compression
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      if (typeof reader.result === "string") {
-        handleFieldChange("data", reader.result);
+    
+    try {
+      // For SVG files, don't compress (they're already vector graphics)
+      if (file.type === 'image/svg+xml') {
+        const reader = new FileReader();
+        reader.onload = () => {
+          if (typeof reader.result === "string") {
+            handleFieldChange("data", reader.result);
+          }
+        };
+        reader.readAsDataURL(file);
+      } else {
+        // Compress JPEG, PNG, and WebP images
+        const compressedDataUrl = await compressImage(file);
+        handleFieldChange("data", compressedDataUrl);
       }
-    };
-    reader.readAsDataURL(file);
+    } catch (error) {
+      console.error("Failed to process image:", error);
+      // Fallback to original file if compression fails
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (typeof reader.result === "string") {
+          handleFieldChange("data", reader.result);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
   };
 
   return (
     <div className="panel-content">
       <div className="form-group">
-        <label>{t.image} (JPG, PNG, SVG)</label>
+        <label>{t.image} (JPG, PNG, WebP, SVG)</label>
         <input
           type="file"
-          accept="image/png,image/jpeg,image/svg+xml"
+          accept="image/png,image/jpeg,image/webp,image/svg+xml"
           onChange={handleFileChange}
         />
       </div>
diff --git a/packages/learningmap/src/translations.ts b/packages/learningmap/src/translations.ts
@@ -121,6 +121,7 @@ export interface Translations {
   loadExternalBackupPrompt: string;
   emptyMapCannotBeShared: string;
   uploadFailed: string;
+  uploadFileTooLarge: string;
   loadFailed: string;
 
   // Share dialog
@@ -341,6 +342,7 @@ const en: Translations = {
     "Would you like to back up your current learningmap before loading the external one?",
   emptyMapCannotBeShared: "An empty learningmap cannot be shared.",
   uploadFailed: "Upload failed. Please try again!",
+  uploadFileTooLarge: "Sharing bigger files is not allowed. You can still download your learningmap and share it via other means.",
   loadFailed: "Failed to load. Please check the URL.",
 
   // Share dialog
@@ -566,6 +568,7 @@ const de: Translations = {
   emptyMapCannotBeShared: "Eine leere Learningmap kann nicht geteilt werden.",
   uploadFailed:
     "Beim Upload ist was schief gelaufen. Bitte versuche es erneut!",
+  uploadFileTooLarge: "Das Teilen größerer Dateien ist nicht erlaubt. Du kannst deine Learningmap weiterhin herunterladen und über andere Wege teilen.",
   loadFailed: "Beim Laden ist etwas schief gegangen. Bitte überprüfe die URL.",
 
   // Share dialog
diff --git a/packages/learningmap/src/useJsonStore.ts b/packages/learningmap/src/useJsonStore.ts
@@ -36,14 +36,26 @@ export const useJsonStore = () => {
       },
       body: JSON.stringify(roadmapData),
     })
-      .then((r) => r.json())
+      .then((r) => {
+        if (r.status === 413) {
+          alert(t.uploadFileTooLarge);
+          throw new Error("Payload too large");
+        }
+        if (!r.ok) {
+          throw new Error(`HTTP error! status: ${r.status}`);
+        }
+        return r.json();
+      })
       .then((json) => {
         const link = window.location.origin + "#json=" + json.id;
         setShareLink(link);
         setShareDialogOpen(true);
       })
-      .catch(() => {
-        alert(t.uploadFailed);
+      .catch((error) => {
+        // Don't show generic error if we already showed the 413 error
+        if (error.message !== "Payload too large") {
+          alert(t.uploadFailed);
+        }
       });
   }, [getRoadmapData, jsonStore, t, setShareLink, setShareDialogOpen]);
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
