Circle & Rounded Photo Crop Online Free
Turn a rectangular photo into a circular profile picture, rounded app icon or hexagonal avatar. Set output size, border width/color and background (transparent or solid), preview instantly on canvas, then download a crisp PNG with clean alpha edges — perfect for social avatars, team directories and forum profiles.
Circle & Rounded Photo Crop In-Browser Workspace
Input data or select files to begin. 100% private, client-side execution with zero server transmission.
How to Use Circle & Rounded Photo Crop
- Step 1: Upload a JPG or PNG; the preview centers a cover-fit crop inside the chosen shape.
- Step 2: Select shape: Circle, Rounded Rectangle or Hexagon.
- Step 3: Set pixel size (e.g. 300 for Discord/Slack style avatars), border width and border color.
- Step 4: Pick transparent or solid background — transparent keeps the alpha channel for PNG.
- Step 5: Click the download button to save cropped-{shape}.png at the exact size you chose.
About Circle & Rounded Photo Crop
Circle cropping clips drawing to a path: for a circle, ctx.arc(cx, cy, r) then ctx.clip(); rounded rectangles use roundRect (or manual arcs); hexagons compute six vertices at 60° intervals from the center. Before clipping, the background is either left clear (global alpha) or filled with a solid color. The source image is cover-fit: scale = max(size/imgW, size/imgH), and the centered source rectangle (sw×sh) is drawn so no empty gaps appear inside the shape. Borders stroke the same path with lineWidth = 2×borderWidth drawn half-in/half-out for even edges. Antialiasing from the canvas rasterizer softens the curve boundary; exporting at 2× logical size (high-DPI option) keeps edges sharp on retina displays. Transparent backgrounds require PNG — JPEG would flatten alpha to white/black. Output dimensions equal the size control exactly (width=height=size). Edge cases: non-image upload rejected; images smaller than the target upscale with slight softness (cover-fit still fills the circle); very large sizes beyond 2048 px warn on memory. Everything runs in-tab — profile photos for HR portals never touch a server.
Frequently Asked Questions
Is my photo uploaded?
No — clipping and export use local canvas only.
Why does JPEG export lose transparency?
JPEG has no alpha; use PNG when the background is transparent.
What size should a profile picture be?
Common targets: 300–400 px for chat apps, 512 px for higher-DPI displays, 1000 px+ for retina web headers.
Can I crop faces automatically?
The crop is centered cover-fit; reposition by editing the source in Photo Editor first if the subject is off-center.
Does the border scale with size?
Border width is absolute pixels at export size — preview and download use the same numbers.