Skip to content

Recorte Circular online

En el navegador — sin subida
Última verificación mayo 2026 — corre en tu navegador

Recorte Circular — Círculo Inscrito Máximo Centrado Automáticamente vía Máscara WHATWG Canvas ctx.arc() + ctx.clip()

Recorta cualquier imagen a un círculo perfecto con esquinas transparentes — la forma más limpia de preparar avatares, fotos de perfil e insignias de logo para plataformas que pintan imágenes dentro de marcos redondos (Twitter/X, Discord, Slack, Mastodon, LinkedIn, GitHub). La herramienta construye el path circular vía el método `ctx.arc(cx, cy, r, 0, 2π)` del Canvas 2D Context del WHATWG (según html.spec.whatwg.org/#dom-context-2d-arc) — una forma arc de 5 argumentos que dibuja un círculo entero de 360° (0 a 2π radianes) centrado en (cx, cy) con radio r, después aplica `ctx.clip()` para sustituir la región de clip actual por la intersección de ese path circular y la extensión del canvas (según html.spec.whatwg.org/#dom-context-2d-clip). El `ctx.drawImage()` subsiguiente escribe píxeles solo dentro de la región de clip; los píxeles fuera quedan transparentes (alfa=0) en la salida. El círculo mayor que cabe en el origen se centra automáticamente: radio = min(width, height) / 2, centrado en (size/2, size/2) dentro de un canvas cuadrado de lado min(width, height). La salida siempre es PNG (W3C PNG 2ª Edición / ISO/IEC 15948:2004) — JPG pintaría las esquinas transparentes como fondo blanco o negro por la falta de canal alfa del JPEG baseline. Los archivos nunca salen del dispositivo.

Relacionado: Recortar Imagen Recorte por Proporción Esquinas Redondeadas Redimensionar Imagen Divisor de Cuadrícula Ampliador de Imágenes

Cómo hacer un recorte circular

  1. Arrastra tu imagen a la herramienta o haz clic para seleccionarla. Cualquier formato ráster común que el navegador decodifique nativamente funciona (JPG, PNG, WebP, AVIF, BMP, GIF).
  2. La herramienta computa el círculo mayor que cabe en el origen: diámetro = min(width, height), centrado en el origen. El recorte se aplica automáticamente — sin ajuste manual.
  3. Previsualiza el resultado contra el fondo de cuadros de transparencia (un patrón CSS que indica áreas con alfa=0) para confirmar que las esquinas son transparentes. El borde del círculo tiene anti-aliasing del rasterizador del Canvas.
  4. Si tu sujeto está descentrado y el auto-recorte se lo pierde, pasa el origen por la herramienta crop-image primero para posicionar el sujeto en el centro, después circle-crop.
  5. Pulsa Descargar para guardar el PNG. El original queda intacto en el disco — los archivos nunca salen del dispositivo.

Casos de uso comunes

  • Producir PNGs de fotos de perfil con esquinas transparentes para que el recorte visible coincida exactamente con lo que pinta el marco circular de una plataforma (Twitter/X, Discord, Slack, Mastodon, LinkedIn, GitHub usan máscaras de perfil circulares).
  • Crear insignias de marca y logos circulares para páginas de equipo, secciones "sobre" y créditos de footer donde la identidad visual prefiere formas redondas.
  • Hacer avatares de podcast y canal YouTube donde la plataforma misma recorta a círculo — pre-recortar el PNG da control sobre qué píxeles del sujeto sobreviven al clip automático de la plataforma.
  • Construir retratos redondos de autor para cabeceras de blog y firmas de correo donde la plantilla circundante pinta avatares dentro de círculos.
  • Producir imágenes de vista previa circulares para maquetas de diseño donde el contexto objetivo (lista de avatares de app móvil, mosaico de panel, tarjeta de contacto) usa marcos de imagen redondos.

Preguntas frecuentes

¿Mi foto quedará descentrada en el círculo?

La herramienta centra el recorte en el centro geométrico de la imagen origen: el círculo mayor que cabe en el origen se centra automáticamente en (width/2, height/2). Si tu sujeto está desplazado a un lado o cerca de arriba/abajo, pasa el origen por la herramienta crop-image primero para recomponer el sujeto en el centro geométrico, después circle-crop. La herramienta circle-crop NO expone offsets de centro de recorte manuales en la implementación actual — auto-centrar es el único modo.

¿Por qué la salida es PNG y no JPG?

JPG (ITU-T T.81 baseline / JFIF v1.02) no tiene canal alfa — las esquinas transparentes requeridas por una máscara circular no pueden representarse en JPG. El JPG decodificado pintaría las esquinas que deberían ser transparentes como blanco puro (fondo JFIF por defecto) o cualquier color de relleno con el que se inicializó el canvas. PNG (W3C 2ª Edición 10 de noviembre de 2003) preserva alfa de 8 bits por píxel byte-exacto vía `canvas.toBlob('image/png')`. Si necesitas salida JPG, llena el canvas con un color de fondo antes de dibujar — pero el resultado ya no será un recorte circular real (tendrás un cuadrado coloreado con apariencia disco-coloreado-sobre-cuadrado-coloreado).

¿Funciona con fotos verticales muy altas?

Sí. El diámetro del círculo es igual a min(width, height) — así que para fotos verticales el eje horizontal más corto se convierte en el diámetro. Los sujetos cerca de arriba o abajo del encuadre pueden caer fuera de la región de recorte circular; si eso pasa, recompón el origen vía la herramienta crop-image primero para posicionar el sujeto en el centro geométrico, después circle-crop.

¿Cómo se renderiza el borde del círculo?

El rasterizador arc() del Canvas 2D Context del WHATWG maneja el borde según su anti-aliasing implementación-definido (la spec en html.spec.whatwg.org deja la calidad del rasterizador implementación-definida). Los navegadores modernos (Chrome, Firefox, Safari, Edge) hacen anti-aliasing a precisión sub-píxel — el borde transiciona a través de ~1-2 px de valores alfa intermedios en lugar de un escalón duro. Para círculos de borde duro píxel-perfecto, necesitarías un rasterizador propio (ninguno expuesto en WHATWG Canvas).

¿Se sube mi imagen?

No. La cadena decodificar + ctx.arc + ctx.clip + ctx.drawImage + toBlob('image/png') corre toda del lado cliente vía WHATWG Canvas. La pestaña Network de DevTools muestra cero peticiones de subida durante la conversión.

Máscara circular basada en path Canvas ctx.arc() + ctx.clip() + razón para salida PNG con alfa

La pipeline de circle-crop es geométricamente simple pero precisa con la spec: (1) carga el origen al HTMLImageElement a dimensiones nativas; (2) computa `size = min(width, height)` — la dimensión mayor que cabe en un cuadrado dentro del origen rectangular, y el diámetro del círculo inscrito mayor; (3) computa offsets de centrado `ox = (width - size)/2`, `oy = (height - size)/2` para centrar el recorte cuadrado en el origen; (4) crea un canvas de dimensión `size × size`; (5) llama `ctx.beginPath() → ctx.arc(size/2, size/2, size/2, 0, Math.PI * 2) → ctx.closePath() → ctx.clip()` según WHATWG html.spec.whatwg.org — `arc()` añade un sub-path circular con centro (size/2, size/2), radio size/2, barrido del ángulo 0 a 2π radianes (un círculo entero); `clip()` sustituye la región de clip actual por la intersección del path arc recién definido y la extensión del canvas; (6) `ctx.drawImage(source, ox, oy, size, size, 0, 0, size, size)` con la forma de 9 argumentos extracción de sub-rectángulo origen — los píxeles dentro de la región de clip circular se escriben; los píxeles fuera quedan transparentes (alfa=0 ya que el canvas se alocó nuevo con estado RGBA todo-cero por defecto); (7) `canvas.toBlob('image/png')` según WHATWG — PNG preserva el canal alfa byte-exacto (alfa de 8 bits por píxel RGBA según W3C PNG 2ª Edición 10 de noviembre de 2003). JPG no está disponible porque el JPEG baseline (ITU-T T.81 1992) no tiene canal alfa — las áreas transparentes se pintarían como blanco por defecto JFIF v1.02 (0xFFFFFF) o lo que sea el color de fondo con el que se llenó el canvas. El PNG de salida es portable a cualquier plataforma: cualquier plataforma que decodifique PNG correctamente maneja la máscara alfa (incluyendo Apple, Android, Windows, navegadores Linux escritorio desde sus versiones tempranas).

  • Path WHATWG Canvas ctx.arc(cx, cy, r, 0, 2π) + ctx.clip() máscara circular según html.spec.whatwg.org/#dom-context-2d-arc + html.spec.whatwg.org/#dom-context-2d-clip
  • Círculo inscrito máximo centrado automáticamente: diámetro = min(width origen, height origen); centro = (size/2, size/2) dentro de canvas cuadrado size × size
  • Salida PNG (W3C 2ª Edición 10 de noviembre de 2003 / ISO/IEC 15948:2004) con alfa de 8 bits por píxel — esquinas transparentes preservadas byte-exacto
  • Borde de círculo con anti-aliasing del rasterizador por defecto del Canvas 2D Context (la spec deja la calidad del rasterizador implementación-definida; los navegadores modernos hacen anti-aliasing a precisión sub-píxel)
  • Funciona con cualquier proporción, vertical u horizontal — el lado más corto se convierte en el diámetro
  • En el navegador vía WHATWG Canvas arc + clip + drawImage + toBlob('image/png') — sin subida
  • Opera en sRGB (IEC 61966-2-1:1999); las imágenes origen sin perfil ICC embebido se interpretan como sRGB

Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).

Fuentes (9)
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: arc(x, y, radius, startAngle, endAngle). html.spec.whatwg.org/#dom-context-2d-arc — the circular-mask path-building primitive: arc() adds a circular sub-path centred at (x, y) with the given radius, swept from startAngle to endAngle in radians; circle-crop calls arc(size/2, size/2, size/2, 0, Math.PI * 2) to define a full 360° circle inscribed in a size × size square canvas.
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: clip(). html.spec.whatwg.org/#dom-context-2d-clip — replaces the current clip region with the intersection of the current path and the canvas extent; subsequent drawImage calls only write pixels inside the clipped region, leaving the rest of the canvas at the default RGBA all-zero (fully transparent) state.
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() 9-argument source-rectangle extraction form. html.spec.whatwg.org/#dom-context-2d-drawimage — the source-rectangle extraction form used to centre the largest square crop on the rectangular source: drawImage(source, ox, oy, size, size, 0, 0, size, size) where size = min(sourceWidth, sourceHeight) and (ox, oy) = ((sourceWidth - size)/2, (sourceHeight - size)/2).
  • W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — the only output format that preserves the alpha channel byte-exactly (8-bit alpha per RGBA pixel); JPG is unavailable for circle-crop because the JPEG baseline (ITU-T T.81 1992) has no alpha channel and would render the transparent corners as JFIF default white.
  • WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob('image/png'). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes the canvas pixel buffer to a PNG Blob via the browser's built-in encoder; alpha channel preserved through the encoder per W3C PNG 2nd Edition.
  • WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point for raster format decode into Canvas.
  • ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; cited in the circle-crop docs as the reason JPG output is unavailable (the baseline JPEG has no alpha channel).
  • Hamilton, E. (C-Cube Microsystems) (1992). JPEG File Interchange Format (JFIF) Version 1.02. 1 September 1992 — JPEG container format; the baseline-JPEG JFIF v1.02 default-white background is what would render in place of the transparent corners if JPG were used as the output format.
  • International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in.

Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.

Patrocinado

Por ·