fix: image sortie 1000x1000 centrée + affichage split avant/après corrigé

This commit is contained in:
2026-06-11 13:14:41 +02:00
parent 06cda68929
commit 4df074f02d
2 changed files with 15 additions and 5 deletions
+1 -1
View File
@@ -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>
)}
+14 -4
View File
@@ -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(