Skip to content

Recortar Imagen Online

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

Recortar Imagen Online — Arrastre Interactivo vía Extracción de Sub-Rectángulo drawImage del WHATWG Canvas

Recorta cualquier imagen con una región de recorte rectangular interactiva arrastrable, más 4 restricciones de proporción preset: 1:1 (cuadrado), 4:3 (la proporción estándar de televisión NTSC/PAL/SECAM según ITU-R BT.601 desde 1982), 16:9 (la proporción HDTV según ITU-R Rec. 709 aprobada por el CCIR en 1989, primer lanzamiento oficial 1990, BT.709-1 publicado en noviembre de 1993), y 3:2 (la proporción de fotografía fija 35mm originada por la Leica I de Oskar Barnack en 1925 en la Feria de Leipzig vía el formato full-frame 24×36mm derivado de dos frames cine 18×24mm cosidos horizontalmente). La conversión corre localmente vía la forma de 9 argumentos de extracción de sub-rectángulo origen de Canvas drawImage del WHATWG (`drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh)` según html.spec.whatwg.org/#dom-context-2d-drawimage) — los píxeles dentro de la región de recorte se preservan 1:1 a dimensiones nativas del origen, solo los píxeles fuera de la región se descartan. El formato de salida casa con el origen: orígenes PNG producen PNG (alfa RGBA pleno preservado), orígenes JPG producen JPG a calidad 0,92 (recodificado vía canvas.toBlob con cuantización del Anexo K según ITU-T T.81). Los archivos nunca salen del dispositivo.

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

Cómo recortar una imagen

  1. Arrastra tu imagen a la herramienta o haz clic para seleccionarla. El decodificador integrado del navegador carga el origen al Canvas a dimensiones nativas.
  2. Elige un preset de proporción: Libre (sin restricción), 1:1 (cuadrado), 4:3 (televisión 4:3), 16:9 (HDTV widescreen), o 3:2 (foto 35mm). El preset restringe la geometría del arrastre.
  3. Arrastra cualquier región rectangular en la imagen para definir el área de recorte, o teclea valores exactos de píxeles W×H en los campos de entrada manual. Las dimensiones actuales del recorte se muestran en vivo durante el arrastre.
  4. La herramienta ejecuta Canvas drawImage con la forma de 9 argumentos sub-rectángulo origen para extraer esos píxeles a un canvas nuevo a resolución nativa, después toBlob() para codificar la salida (PNG si el origen era PNG; JPG calidad 0,92 en otro caso).
  5. Pulsa Descargar para guardar la copia recortada. El original queda intacto en el disco — los archivos nunca salen del dispositivo.

Casos de uso comunes

  • Recortar fondos de fotos de producto para una ficha e-commerce más limpia — arrastra para seleccionar solo el producto, mantén la resolución nativa.
  • Recortar a un sujeto específico tras una toma gran angular para un post de redes sociales más centrado (Instagram cuadrado 1:1, Twitter/X 16:9, Facebook 4:3 según plataforma).
  • Eliminar bordes sensibles (direcciones, matrículas, identificadores) de una captura antes de compartir — los píxeles descartados nunca llegan al blob de salida.
  • Producir recortes nativos 3:2 desde una foto cámara móvil 4:3 para casar con un flujo de fotografía 35mm (imprimir a 4×6, 8×12, etc.).
  • Preparar recortes de recursos UI píxel-precisos para sistemas de diseño donde las dimensiones de slot son conocidas de antemano — la entrada manual W×H da control exacto.

Preguntas frecuentes

¿Hay un tamaño mínimo de recorte?

La herramienta acepta cualquier recorte hasta 1×1 píxel. Los muy pequeños no son prácticamente útiles pero la herramienta no los restringe; la forma de 9 argumentos sub-rectángulo origen de Canvas drawImage según WHATWG html.spec.whatwg.org acepta dimensiones origen ≥ 1 en cualquier eje.

¿Por qué estos cuatro presets de proporción?

1:1 es el cuadrado universal (posts cuadrados Instagram, másters de origen de iconos de app, avatares de perfil social). 4:3 es la proporción TV de definición estándar NTSC/PAL según ITU-R BT.601 (ratificada 1982) — aún común para pantallas tablet y formatos foto amigables para impresión. 16:9 es la proporción widescreen HDTV según ITU-R Rec. 709 (aprobación CCIR 1989, primer lanzamiento oficial 1990, BT.709-1 noviembre de 1993) — universal para monitores modernos / TVs / YouTube. 3:2 es la proporción foto-fija 35mm originada por la Leica I de Oskar Barnack (Feria de Leipzig 1925, full-frame 24×36mm derivado de dos frames cine 18×24mm cosidos) — aún la proporción nativa de sensores full-frame digitales SLR/mirrorless.

¿Recortar pierde calidad?

Los píxeles dentro de la región de recorte se preservan 1:1 desde el HTMLImageElement origen al canvas destino vía la forma de 9 argumentos sub-rectángulo origen de Canvas drawImage (sin escalado, sin remuestreo, copia de píxeles byte-idéntica). Solo los píxeles fuera de la región se descartan. Preservación de formato: orígenes PNG se quedan sin pérdida RGBA por toda la cadena; orígenes JPG se recodifican vía canvas.toBlob a calidad 0,92 (cuantización perceptual del Anexo K de ITU-T T.81; ~1-2% pérdida adicional perceptualmente invisible respecto al JPG origen).

¿Puedo casar con una proporción específica fuera de los presets?

Usa la herramienta aspect-ratio-crop para auto-recortes centrados con proporciones fijas adicionales (9:16 retrato, además de 1:1/4:3/16:9/3:2). Para regiones rectangulares arbitrarias con valores manuales W×H, los campos de entrada manual de esta herramienta aceptan cualquier par (entero positivo, entero positivo) dentro de las dimensiones origen. Para máscaras circulares (con alfa recortado a un círculo), usa la herramienta circle-crop. Para máscaras de esquinas con rectángulo redondeado, usa la herramienta round-corners.

¿Se sube mi imagen?

No. La decodificación + extracción de sub-rectángulo origen de 9 argumentos del Canvas drawImage + recodificación toBlob corren todos del lado cliente vía WHATWG Canvas. La pestaña Network de DevTools muestra cero peticiones de subida durante la conversión.

Arrastrar-para-seleccionar región + 4 presets de proporción + forma de 9 argumentos de sub-rectángulo drawImage del WHATWG Canvas

La herramienta de recorte expone la forma de 9 argumentos de extracción de sub-rectángulo origen de drawImage del Canvas 2D Context del WHATWG: `drawImage(image, sx, sy, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight)` según html.spec.whatwg.org/#dom-context-2d-drawimage. La tupla (sx, sy, sw, sh) define el rectángulo origen a extraer del HTMLImageElement cargado; (0, 0, sw, sh) escribe esos píxeles a un canvas nuevo a resolución nativa (sin escalado). Las cuatro proporciones preset restringen la geometría del arrastre: 1:1 (cuadrado perfecto — útil para posts cuadrados Instagram, avatares de perfil, másters de origen de iconos de app), 4:3 (la proporción de televisión NTSC/PAL según ITU-R BT.601, ratificada por el CCIR en 1982 — la proporción TV de definición estándar durante casi 70 años hasta que el 16:9 del HDTV la desplazó a mediados de los 2000; aún usada para pantallas tablet, SLR clásicas y formatos foto amigables para impresión), 16:9 (HDTV ITU-R Rec. 709, ratificada por el CCIR en 1989 como 'Recommendation XA/11 MOD F', primer lanzamiento oficial 1990, renombrada a ITU-R BT.709 cuando el CCIR se convirtió en ITU-R en 1992, BT.709-1 noviembre de 1993 — la proporción widescreen moderna HDTV/UHDTV universalmente usada para vídeos YouTube, monitores 1080p/4K, TVs modernos), y 3:2 (la proporción foto-fija 35mm originada por Oskar Barnack en Ernst Leitz Wetzlar — el prototipo Ur-Leica 1913, la Leica I comercial lanzada en la Feria de Leipzig 1925 — vía el formato full-frame 24×36mm derivado de coser dos frames cine 18×24mm horizontalmente, llevada después a cada sensor full-frame digital SLR/mirrorless hasta 2026). El preset 'Libre' quita la restricción y permite arrastrar cualquier región rectangular. La salida preserva el formato origen: PNG → PNG (alfa RGBA intacto); JPG → JPG a calidad 0,92 (recodificado vía canvas.toBlob con cuantización perceptual del Anexo K de ITU-T T.81, pérdida adicional perceptualmente invisible de ~1-2%).

  • Arrastrar-para-seleccionar región de recorte — clic y arrastre sobre cualquier área rectangular de la imagen; también acepta entrada manual de píxeles W×H
  • Cinco modos de proporción: Libre (sin restricción) + 1:1 (cuadrado) + 4:3 (NTSC/PAL BT.601 1982) + 16:9 (HDTV Rec. 709 1989) + 3:2 (35mm Leica 1925)
  • Superposición de cuadrícula regla-de-tercios sobre la selección de recorte en vivo (guía 3×3 de composición en cian de baja opacidad según la convención del John Thomas Smith 1797 *Remarks on Rural Scenery*)
  • Visualización en tiempo real de las dimensiones de recorte (W×H px actual durante el arrastre)
  • La salida preserva el formato origen: PNG se queda PNG con alfa RGBA; JPG se queda JPG a calidad 0,92 (cuantización perceptual del Anexo K de ITU-T T.81)
  • Extracción de sub-rectángulo de 9 argumentos de Canvas drawImage del WHATWG a resolución de píxel nativa (sin escalado, sin remuestreo — copia pura de píxeles del origen al destino)
  • Píxeles dentro de la región de recorte preservados 1:1; solo los píxeles fuera de la región se descartan (sin pérdida desde los píxeles origen)
  • En el navegador vía WHATWG Canvas drawImage + HTMLCanvasElement.toBlob — 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 (10)
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() 9-argument source-rectangle extraction form. html.spec.whatwg.org/#dom-context-2d-drawimage — the crop pipeline core: drawImage(source, sx, sy, sourceWidth, sourceHeight, dx, dy, destinationWidth, destinationHeight) extracts the (sx, sy, sw, sh) sub-rectangle from the source HTMLImageElement and writes those pixels to (dx, dy, dw, dh) of the destination canvas; setting dx=dy=0 and dw/dh equal to sw/sh produces a pixel-exact crop with no scaling.
  • International Telecommunication Union (ITU-R, formerly CCIR) (1982). ITU-R BT.601 — Studio encoding parameters of digital television for standard 4:3 and wide screen 16:9 aspect ratios. itu.int/rec/R-REC-BT.601 — the 4:3 aspect ratio standard for NTSC/PAL/SECAM standard-definition television, ratified by the CCIR in 1982; the dominant TV aspect for nearly 70 years until HDTV's 16:9 displaced it in the mid-2000s; still used for tablet displays and printer-friendly photo formats.
  • International Telecommunication Union (ITU-R, formerly CCIR) (1990). ITU-R Rec. 709 / BT.709 — HDTV signal characteristics + 16:9 aspect ratio. itu.int/rec/R-REC-BT.709 — the HDTV widescreen 16:9 aspect ratio standard, approved by the CCIR in 1989 as 'Recommendation XA/11 MOD F', first official release 1990, renamed to ITU-R BT.709 when the CCIR became ITU-R in 1992, BT.709-1 published November 1993; the modern HDTV/UHDTV widescreen ratio universally used for YouTube videos, 1080p/4K monitors, modern TVs.
  • Barnack, O. (Ernst Leitz Wetzlar) (1925). Leica I — 35mm full-frame 24×36mm format + 3:2 aspect ratio origin. leica-camera.com/en-US/photography/100-years/the-history-of-the-leica-I — Oskar Barnack's commercial Leica I camera, released at the Leipzig Spring Fair 1925 (Ur-Leica prototype dated 1913), established the 35mm still-photography full-frame format (24×36mm) derived from stitching two 18×24mm cine frames horizontally; the 3:2 aspect ratio remains the native ratio of every full-frame digital SLR/mirrorless sensor through 2026.
  • WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point: JPG / PNG / WebP / AVIF / BMP / GIF / HEIC (Safari only) load into HTMLImageElement and reach Canvas drawImage uniformly via the browser's built-in decoder registry.
  • WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob(). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes the canvas pixel buffer to a Blob via the browser's built-in encoder for the requested MIME type (image/png lossless, image/jpeg with quality argument for ITU-T T.81 Annex K perceptual quantisation).
  • 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; Annex K quantisation tables scale by the canvas.toBlob quality argument (0.92 in this tool's JPG output path).
  • Hamilton, E. (C-Cube Microsystems) (1992). JPEG File Interchange Format (JFIF) Version 1.02. 1 September 1992 — JPEG container format; APP0 marker, density units, thumbnail handling. Output via canvas.toBlob('image/jpeg') ships JFIF v1.02 by default.
  • W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — PNG output format for sources with alpha; preserves 8-bit alpha per RGBA pixel byte-exactly through canvas.toBlob('image/png').
  • 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; source images without an embedded ICC profile are interpreted as sRGB by the browser decoder during the load step.

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.

Guías relacionadas

Patrocinado

Por ·