Drag & drop image to crop
Adjust crop borders locallyPrivacy Secured: This utility runs 100% inside your browser. No files, logs, or values are uploaded to any server. Your information stays safe on your device.
About Image Cropper
The Image Cropper is an interactive client-side utility designed to trim borders and extract specific regions from your images. Trimming out clutter, centering a subject, or adjusting the framing of an image are common editing tasks. Our cropper provides simple controls to define the crop box dimensions and offset coordinates, drawing a live visual overlay so you know exactly what the output will look like before you save it.
How it Works
Upload your image to the tool. A visual overlay box appears over the photo. Use the sliders to adjust the crop box position (X and Y coordinates) and size (Width and Height percentages). The visual overlay updates in real-time, showing the cropped region in full color while dimming the discarded borders. Click the Crop button to render the pixels onto a canvas and download the cropped image.
Key Features
- Visual Overlay: Clear dashed boundary lines show the crop area.
- Coordinate Sliders: Precision controls for horizontal and vertical offsets.
- Live Preview: Inspect the final cropped output before saving.
- Browser-Based: Safe, private, and processes files without uploads.
Technical Details
The cropper calculates relative percentage offsets based on the displayed image container. When the user crops, the script multiplies the percentage values by the image's native pixel dimensions to locate the exact coordinates (realX, realY, realW, realH). It draws the cropped slice onto a target canvas using ctx.drawImage(img, realX, realY, realW, realH, 0, 0, realW, realH) and generates a download link.