image bg upload limit

src/components/BgImageCropper.tsx

@@ -135,16 +135,28 @@ export function BgImageCropper({ imageSrc, aspectRatio, onCrop, onCancel }: Prop
     const srcH = cb.h / scale
 
     // Output resolution: screen size × device pixel ratio, capped at 1440px wide
+    // Then scale down resolution until the result is under 3MB (keeping quality at 0.92)
+    const MAX_BYTES = 1 * 1024 * 1024
     const dpr = Math.min(window.devicePixelRatio || 1, 2)
-    const outW = Math.min(Math.round(window.innerWidth * dpr), 1440)
-    const outH = Math.round(outW / aspectRatio)
+    let w = Math.min(Math.round(window.innerWidth * dpr), 1440)
 
     const canvas = document.createElement('canvas')
-    canvas.width = outW
-    canvas.height = outH
     const ctx = canvas.getContext('2d')!
-    ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, outW, outH)
-    onCrop(canvas.toDataURL('image/jpeg', 0.92))
+    let dataUrl: string
+
+    do {
+      const h = Math.round(w / aspectRatio)
+      canvas.width = w
+      canvas.height = h
+      ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, w, h)
+      dataUrl = canvas.toDataURL('image/jpeg', 0.92)
+      // base64 → approx byte size
+      const bytes = (dataUrl.length - dataUrl.indexOf(',') - 1) * 0.75
+      if (bytes <= MAX_BYTES) break
+      w = Math.round(w * 0.8)
+    } while (w > 200)
+
+    onCrop(dataUrl!)
   }, [aspectRatio, onCrop])
 
   return (