Image Crop
Visually crop images with free or locked aspect ratios.
Image Crop is a visual cropper: "Visually crop with handles, presets, live preview & grid guides," as the card says. Drag eight handles on the CropCanvas or nudge the selection with the keyboard (hint: "Arrows: move · Shift: 10px · [ ]: resize"), lock an aspect ratio from Free and Square through 9:16 Story/Reel and Custom ("2:1 or 1.5"), and watch the "Selection: {w}×{h} px • Image: {W}×{H}" line track your rectangle.
Optional grid overlays — Rule of Thirds, Golden Ratio, Center Crosshair — help composition without touching output pixels. "Crop Image" redraws the selected sub-rectangle on a canvas and hands you a Download button; everything (upload, crop state, result) lives locally in Redux and canvas, never on a server.
How it works
Uploading pushes the file and its dimensions into Redux cropSlice (item, dims, cropArea, gridType, aspectRatio, customRatio, result, isProcessing). CropCanvas renders the image with eight 16px handles; constrainCropArea enforces the chosen aspect ratio and image bounds as you drag.
Keyboard shortcuts (when focus is not in an input): arrows move, Shift steps 10px, [ and ] resize the selection. Clicking "Crop Image" draws the crop rect to a canvas (PNG or JPEG based on source), stores the result, and shows Download / Start Over; "Reset" clears crop state via clearAll while toasts report "Image cropped successfully!" or errors.
How to use
- Drop an image — dimensions load into Redux and the CropCanvas appears.
- Drag the handles or draw a selection on the canvas.
- Lock an aspect-ratio preset (Free, Square, 4:3, 16:9, 3:2, 9:16, 4:5, 1:2) or choose Custom and enter "2:1 or 1.5".
- Optionally set "Grid Overlay" to None, Rule of Thirds, Golden Ratio, or Center Crosshair.
- Fine-tune with arrow keys / Shift / [ and ], watching the "Selection: …" line update.
- Leave "Live Preview" on if you want the cropped region previewed as you adjust.
- Click "Crop Image" (label becomes "Cropping...").
- Download the result, or use "Reset" / "Start Over" to adjust again.
Tips
- Keyboard shortcuts work only when focus is not inside an input or textarea.
- Custom ratio accepts both "2:1" style and decimal "1.5" style entries.
- Grid overlays guide composition but never appear in the exported crop.
- "Reset" clears the crop rectangle while the clearAll flow resets the whole workflow if you want a fresh file.
- The 9:16 (Story/Reel) preset is the fast path to Instagram Story crops; 4:5 covers Instagram portrait.
Image Crop FAQ
Does the grid overlay appear in the export?
No — grids are visual guides only; the export redraws just the selected pixel region.
Can I crop to Instagram Story size?
Yes — pick the 9:16 (Story/Reel) preset, adjust the selection, then Crop Image.
Are keyboard shortcuts supported?
Yes — arrows move the selection, Shift steps 10px, and [ and ] resize it.
Is the crop lossless?
The region is redrawn on canvas and re-encoded as PNG or JPEG based on the source — pixel data is resampled, not merely byte-sliced.
Is an upload required?
No — crop state, rendering, and export all run locally.
Credits
- Canvas 2D API — Region redraw and export
- Redux Toolkit — cropSlice tracks selection, ratios, and result