Profile Picture Maker
Crop any photo into a perfect circle or square profile picture.
Profile Picture Maker creates "perfectly cropped profile pictures with borders" from any photo. Drop one image, choose Shape (Circle or Square), drag "Size (px)" from 64 to 1024, and optionally stroke a border with "Border Width" (0–20) and "Border Color". "Create Profile Pic" ("Creating..." while it runs) center-crops the source to a square at your chosen size — scaling with Math.max(size/w, size/h) — then applies the circle clip or square frame.
Circle mode clips via ctx.arc and strokes a ring whose lineWidth equals twice the Border Width; square mode draws the crop and optionally strokes a rectangle inset by the border. The result panel compares "Original" vs "Result" file sizes, and export is always lossless PNG (quality 1). Everything runs on a local canvas — no upload, no network.
How it works
lib/imageProfilePic.ts computes a square center-crop: scale = Math.max(size/w, size/h), so the frame is filled without letterboxing. Circle mode calls ctx.arc as a clip path before drawing, then optionally strokes the ring; square mode draws directly then strokeRect. The Zod profilePicSchema allows shape circle|square, size int 64–2048 (default 512), borderWidth 0–20 (default 0), borderColor default #ffffff — though the page defaultValues differ: size 400, borderWidth 4, and the UI slider caps at 1024.
Export is toBlob('image/png', 1) — always lossless PNG with the original filename. Extreme aspect inputs are center-cropped around the middle of the photo. No third-party libraries: pure Canvas 2D API, fully offline.
How to use
- Drop one photo (accept image/*; single file).
- Pick "Shape": Circle or Square.
- Set "Size (px)" with the slider (64–1024; page default is 400).
- Set "Border Width" (0–20; page default 4) and "Border Color" (default #ffffff).
- Click "Create Profile Pic" (button reads "Creating...").
- Review the "Original" vs "Result" size stats.
- Click "Download" for the PNG, or "Start Over" to begin again.
Tips
- Circle + border reads best for avatar slots; size 400–512 suits most platforms.
- The border is stroked inside the edge (lineWidth = 2×Border Width) — set Border Width to 0 to disable it.
- Output is always PNG (quality 1), so the circle clip and any transparent pixels stay lossless.
- Extreme aspect inputs center-crop — pre-crop with image-crop if the subject sits off-center.
Profile Picture Maker FAQ
What file do I get?
A PNG named after the source, square at the chosen Size (px).
Does circle mode produce transparency outside the circle?
Pixels outside the clip aren't drawn from the photo; the export is a square PNG — platforms typically mask avatars themselves.
Is the size slider the only size control?
Yes — 64–1024 in the UI (the schema allows up to 2048, but the slider caps at 1024).
Is the photo uploaded?
No — all cropping and stroking run on a local canvas; there is no network and no AI.
Can I make a bordered square?
Yes — Shape = Square with Border Width > 0 strokes a rectangle inset by the border.
Credits
- Canvas 2D API — Center-crop, circle clip, border stroke, PNG export