fix: image sortie 1000x1000 centrée + affichage split avant/après corrigé
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user