fix: disable cropping, keep rotation only
Cropping UI was a placeholder and never fully implemented. Users couldn't actually select a crop region - it always used full image bounds. Simplified modal to focus on what works: - Rotation adjustment ✅ (fully working) - Zoom/pan for preview ✅ (fully working) - Removed aspect ratio controls (crop not functional) - Changed header to "Rotate Image" Image processing now: 1. Takes user's rotation adjustment 2. Applies rotation to full image 3. No cropping (uses full bounds) 4. Saves rotated image This ensures saved image matches the rotation user selected in modal. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
||||
<div className="bg-slate-900 border border-slate-700 rounded-lg shadow-2xl max-w-6xl w-full max-h-[95vh] overflow-hidden flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-slate-700 flex items-center justify-between bg-slate-800">
|
||||
<h2 className="text-xl font-normal text-white">Adjust Image</h2>
|
||||
<h2 className="text-xl font-normal text-white">Rotate Image</h2>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="p-2 hover:bg-slate-700 rounded text-gray-400 hover:text-white transition"
|
||||
@@ -276,8 +276,8 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Aspect Ratio */}
|
||||
<div>
|
||||
{/* Aspect Ratio - DISABLED (cropping not implemented) */}
|
||||
{/* <div>
|
||||
<label className="block text-sm font-normal text-white mb-2">Aspect Ratio</label>
|
||||
<div className="space-y-2">
|
||||
{aspectRatios.map((ratio) => (
|
||||
@@ -294,7 +294,7 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Reset */}
|
||||
<button
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user