⚡
Ubify Studio Accelerator
Initializing High-Speed Workspace
Loading lossless client-side canvas engine with zero server telemetry.
Clip image borders to uniform rounded rectangles or circular avatars with transparent PNG export. All canvas rendering happens locally on your machine.
When you import an image, the browser reads the file locally into an HTML5 canvas element matching native image dimensions. For rounded rectangles, quadratic bezier curves calculate smooth corner arcs proportional to the shortest side. For circular mode, the engine draws a circular path with radius equal to half the shortest dimension. The canvas clipping mask retains inner pixel content while clearing outside pixels to transparent alpha channels, exporting directly to standard PNG format.
Suppose you have a 1200x800 px product screenshot saved as an unrounded JPEG (640 KB):
| Asset Type | Typical Dimensions | Slider Setting | Visual Output |
|---|---|---|---|
| Profile Avatar | Square (e.g. 800x800) | Circular mode (50%) | Centered round avatar badge |
| App Icon Preview | Square (e.g. 1024x1024) | 20% to 22% | Squircle style with soft borders |
| Web UI Card | 16:9 or 4:3 | 4% to 8% | Gentle rounded borders for cards |
| Blog Feature Banner | 1200x630 | 5% | Subtle softening of header boundaries |
All curvature math, canvas path generation, and PNG rasterization execute inside your web browser using HTML5 Canvas APIs.
Your source photos remain on your machine and are never uploaded to any remote server or cloud storage endpoint.
The image exports as a standard PNG with true alpha transparency in clipped corner areas. When placed on colored website backgrounds or presentation slides, only the rounded artwork shows.
No. The clipping path calculation and PNG export execute entirely in your local web browser session memory. Zero file data travels across the network.
Switch to the Circular mode button. The canvas clips the image to a circle centered on the shortest side with 50% radius and exports transparent outer areas.
The tool applies uniform curvature across all four corners using quadratic bezier curves, with radius adjustable from 0% to 50%.
No. The canvas draws the original image pixels at native resolution inside the vector clipping path, leaving pixel content sharp while smoothing outer edge contours.