Crop
Image Crop
The removal of outer areas from an image to change its composition, aspect ratio, or focus.
Technical Detail
In digital imaging, crop plays a critical role in how images are stored, processed, and displayed. Modern image pipelines handle removal through standardized APIs (Canvas, WebGL, ImageBitmap) that operate directly on GPU memory for performance. Understanding crop is essential for optimizing web delivery, where image payload typically accounts for 40-60% of total page weight. Browser-based tools can manipulate removal entirely client-side using the Canvas API without server round-trips.
Example
```javascript
// Crop image to specific region
const canvas = document.createElement('canvas');
canvas.width = cropWidth;
canvas.height = cropHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(
img,
cropX, cropY, cropWidth, cropHeight, // source rect
0, 0, cropWidth, cropHeight // dest rect
);
```
Related Tools
C
Compress Image
R
Resize Image
C
Crop Image
R
Rotate Image
F
Flip Image
C
Convert Image
W
Watermark Image
S
SVG to PNG
I
Image to Base64
R
Round Corners
A
Add Border
I
Image Filters
A
Adjust Image
B
Blur Image
S
Sharpen Image
M
Make Square
G
Grayscale Image
S
Sepia Image
P
Pixelate Image
S
Strip Image Metadata