Image Shape Mask and Rounded Corners
Apply a circle, heart, hexagon or adjustable rounded rectangle to a local image and download a PNG with transparent outer areas.
About this image shape mask and rounded corners
Apply a circle, heart, hexagon or adjustable rounded rectangle to a local image and download a PNG with transparent outer areas Processes media assets directly in the browser using HTML5 Canvas and WebAssembly decoders, ensuring zero file uploads.
Image processing & canvas pipeline
Performs high-precision 2D affine geometric transformations, aspect-ratio scaling, and rectangular cropping on raster images. Algorithms calculate proportional scaling factors preserving aspect ratios (e.g. 16:9, 4:3, 1:1, 9:16), implement bilinear interpolation for smooth downsampling, and execute 90-degree orthogonal rotations and horizontal/vertical reflections without interpolation loss. Generates multi-resolution icon packages for iOS (Apple Touch Icon), Android (Adaptive Icons), and desktop favicons.
Worked image transformation example
Scenario: Apply the fixed rounded-corner mask to a 240×120 test PNG.
Sample input:
Processing: Canvas clips a rounded rectangle with 14.4px radius.
Illustrative output:
Resolution, dimension & memory limits
Operational constraints and validation boundaries: Local PNG/JPEG/WebP smaller than 30 MB; each side at most 4096px, total at most 8,388,608 pixels. Radius is an integer 0–50% of the shorter side. No image rescaling, arbitrary uploaded mask, border, remote URL, SVG, animation or metadata preservation. Canvas antialiasing is browser-dependent; no claim of mathematically exact edge coverage. Large compressed inputs still need decoding memory. Near-limit memory stress, physical touch, other browsers and native-language review remain unverified.
Image Shape Mask and Rounded Corners image operations execute in client memory via HTML5 Canvas and browser decoders. Inspect output previews before replacing source assets.
In-memory image processing boundary
File buffers and document assets in Image Shape Mask and Rounded Corners are processed in-memory via local browser APIs with zero file uploads to CZOA servers.
Image format & W3C Canvas standards
W3C Canvas 2D context specifications and standard image container formats:
- WHATWG Canvas 2D
- PNG (ISO/IEC 15948)
Image Shape Mask and Rounded Corners verification · Audit standards
How to use it
- Enter, paste, or select your input data into the Image Shape Mask and Rounded Corners workspace controls.
Frequently asked questions
How do shape, radius and transparent PNG output work?+
Operational requirements for "How do shape, radius and transparent PNG output work?" are verified in local memory during execution of Image Shape Mask and Rounded Corners.
What controls does Rounded-Corner Image Mask provide?+
Choose an image and shape. Drag the radius slider or enter an integer from 0 to 50; radius affects rounded rectangles only. Output keeps the original dimensions and pixel positions. The circle is centered with diameter equal to the shorter side; the heart uses two cubic curves and the hexagon fits the image bounds. A separate antialiased Canvas mask is combined with the source using destination-in, retaining source transparency. Preview updates immediately; its checkerboard is not exported. Example: a 240×120 image with radius 25% uses a 30px corner radius and remains 240×120. The original fixed rounded-rectangle tool stays below.
What limits apply to the rounded-corner mask?+
Local PNG/JPEG/WebP smaller than 30 MB; each side at most 4096px, total at most 8,388,608 pixels.
What did the independent PNG check establish?+
Original fixed rounded rectangle: Download the 240×120 test PNG. The code requests a 14.4-pixel rounded clip and PNG output; the actual browser PNG corner transparency and center pixels remain to be checked.