From 4df074f02db9026f486e436e1cc2b7a8fcdf214c Mon Sep 17 00:00:00 2001
From: Mathieu <mathieu.fort@gmail.com>
Date: Thu, 11 Jun 2026 13:14:41 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20image=20sortie=201000x1000=20centr=C3=A9?=
 =?UTF-8?q?e=20+=20affichage=20split=20avant/apr=C3=A8s=20corrig=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/images/ImageCard.tsx |  2 +-
 src/lib/client/bgRemover.ts         | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/images/ImageCard.tsx b/src/components/images/ImageCard.tsx
index 597ec9c..1899fa3 100644
--- a/src/components/images/ImageCard.tsx
+++ b/src/components/images/ImageCard.tsx
@@ -114,7 +114,7 @@ export function ImageCard({
           <BlobThumbnail blob={item.originalBlob} alt="Original" />
         </div>
         {item.processedBlob && (
-          <div className="absolute inset-0 border-l-2 border-indigo-500 left-1/2 w-1/2">
+          <div className="absolute top-0 bottom-0 right-0 w-1/2 border-l-2 border-indigo-500">
             <BlobThumbnail blob={item.processedBlob} alt="Traité" />
           </div>
         )}
diff --git a/src/lib/client/bgRemover.ts b/src/lib/client/bgRemover.ts
index aee2427..963f0ab 100644
--- a/src/lib/client/bgRemover.ts
+++ b/src/lib/client/bgRemover.ts
@@ -63,13 +63,23 @@ export function compositeOnWhite(pngBlob: Blob, feather: number): Promise<Blob>
         fgCtx.globalCompositeOperation = 'source-over'
       }
 
+      // Canvas de sortie 1000×1000 blanc, sujet centré avec padding de 5%
+      const SIZE = 1000
+      const PADDING = 0.05
+      const available = Math.round(SIZE * (1 - PADDING * 2))
+      const scale = Math.min(available / width, available / height)
+      const dw = Math.round(width * scale)
+      const dh = Math.round(height * scale)
+      const dx = Math.round((SIZE - dw) / 2)
+      const dy = Math.round((SIZE - dh) / 2)
+
       const out = document.createElement('canvas')
-      out.width = width
-      out.height = height
+      out.width = SIZE
+      out.height = SIZE
       const ctx = out.getContext('2d')!
       ctx.fillStyle = '#ffffff'
-      ctx.fillRect(0, 0, width, height)
-      ctx.drawImage(fgCanvas, 0, 0)
+      ctx.fillRect(0, 0, SIZE, SIZE)
+      ctx.drawImage(fgCanvas, dx, dy, dw, dh)
 
       URL.revokeObjectURL(objectUrl)
       out.toBlob(