diff --git a/frontend/components/ImageAdjustmentModal.tsx b/frontend/components/ImageAdjustmentModal.tsx index f7d53509..b062d3ca 100644 --- a/frontend/components/ImageAdjustmentModal.tsx +++ b/frontend/components/ImageAdjustmentModal.tsx @@ -119,22 +119,18 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj }; const handleConfirm = async () => { - if (!useImage || !cropBounds || !imageRef.current) { - console.log('[Modal] User clicked confirm - no image/crop/useImage flag'); + if (!useImage || !imageRef.current) { + console.log('[Modal] User clicked confirm - no image/useImage flag'); onConfirm(null); return; } console.log('=== IMAGE ADJUSTMENT MODAL DEBUG ==='); console.log('[Original] Image dimensions:', imageDimensions); - console.log('[Original] Image URL:', imageRef.current?.src?.substring(0, 50) + '...'); console.log('[User] Rotation:', rotation, '°'); - console.log('[User] Zoom level:', zoom); - console.log('[User] Pan X/Y:', panX, '/', panY); - console.log('[User] Crop bounds:', cropBounds); console.log('[User] Use image flag:', useImage); - // Process image: apply rotation and crop + // Process image: apply rotation ONLY (no crop) const processCanvas = document.createElement('canvas'); const ctx = processCanvas.getContext('2d'); if (!ctx) { @@ -142,22 +138,21 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj return; } - const { x, y, width, height } = cropBounds; - - console.log('[Processing] Canvas dimensions will be:', width, 'x', height); - console.log('[Processing] Crop region from original:', { x, y, width, height }); - - // Set canvas to crop dimensions + // Use full image dimensions (no cropping) + const { width, height } = imageDimensions; processCanvas.width = width; processCanvas.height = height; - // Apply rotation around crop center and crop + console.log('[Processing] Canvas dimensions:', width, 'x', height); + console.log('[Processing] Applying rotation:', rotation, '°'); + + // Apply rotation around center ctx.save(); ctx.translate(width / 2, height / 2); ctx.rotate((rotation * Math.PI) / 180); - ctx.translate(-imageDimensions.width / 2 + x, -imageDimensions.height / 2 + y); + ctx.translate(-width / 2, -height / 2); - console.log('[Processing] Drawing image to canvas with transforms applied'); + console.log('[Processing] Drawing image with rotation applied'); ctx.drawImage(imageRef.current, 0, 0); ctx.restore(); @@ -169,10 +164,15 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj console.log('[Result] Processed image blob size:', blob.size, 'bytes'); console.log('[Result] Blob type:', blob.type); console.log('=== END DEBUG ==='); - onConfirm({ rotation, cropBounds, imageBlob: blob }); + // Return with full image bounds (no crop) and rotation + onConfirm({ + rotation, + cropBounds: { x: 0, y: 0, width, height }, + imageBlob: blob + }); } else { console.log('[ERROR] Failed to convert canvas to blob'); - onConfirm({ rotation, cropBounds }); + onConfirm({ rotation, cropBounds: { x: 0, y: 0, width, height } }); } }, 'image/jpeg', 0.95); }; @@ -233,7 +233,7 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
{/* Header */}
-

Adjust Image

+

Rotate Image

- {/* Aspect Ratio */} -
+ {/* Aspect Ratio - DISABLED (cropping not implemented) */} + {/*
{aspectRatios.map((ratio) => ( @@ -294,7 +294,7 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj ))}
-
+
*/} {/* Reset */}