Recortador Circular de Imagen

A Circle Crop Tool (or Round Avatar Generator) is a specialized geometry utility used to extract a circular region from a square or rectangular image. This tool is essential for UI/UX designers, marketing managers, and social media users creating rounded profile pictures, designing "Button" icons, or preparing "Contact" bubbles for apps.

Implementation & Processing Pipeline

The processing engine handles round extraction through a precise three-stage masking pipeline:

1. Radial Mapping: The tool calculates the center point (x, y) and the radius of your selection.
2. Clipping Path Logic: Instead of "Cutting" the file, the engine applies a Circular Clip Path using the HTML5 Canvas.
3. Alpha Rendering: The pixels outside the circle are assigned a Zero Opacity Value (Alpha: 0).
   • PNG/WebP: The result is a crisp circle on a "Transparent" background.
   • JPEG: Since JPEGs don't support transparency, the outer area is usually filled with a solid color (e.g., white or black).
4. Reactive Real-time Rendering: Your "Avatar Preview" and the center-point coordinates update instantly as you drag the circular marquee.

How It's Tested

We test the circular masking engine to ensure clean edges and proper transparency.

1. The "Radius" Precision:
   • Action: Select a 200px diameter circle.
   • Expected: The output image dimensions are exactly 200x200px.
2. The "Alpha Mask" Verify:
   • Action: Crop a red square into a circle.
   • Expected: The pixels in the corners (outside the round area) must read as RGBA(0,0,0,0) - fully transparent.
3. The "Format" Restriction:
   • Action: Attempt to save as JPEG.
   • Expected: The tool warns that transparency will be lost (or defaults to white background).
4. The "Centering" Logic:
   • Action: Use the "Center" button on a portrait image.
   • Expected: The circle snaps perfectly to the horizontal midpoint.

The History of the Round Frame

Circles have been a preferred frame for human faces for millennia.

• The Portrait Cameo (3rd Century BCE): Ancient jewelry used "Tondo" (round) frames to focus on noble faces. This Psychological Focus is still why we use circles for avatars today.
• The "Vignette" (1880s): Early photographers darkened the corners of prints to create a soft, circular focus on the subject.