Recortador de Imágenes
Elige una imagen y luego arrastra un marco sobre ella para seleccionar el área que quieres conservar. Todo ocurre en tu navegador con la API Canvas — la imagen nunca se sube a un servidor.
Arrastra sobre la imagen de abajo para seleccionar el área a recortar.
Recorta una imagen sin subirla a ningún sitio
Arrastrar sobre la imagen registra un marco de selección en píxeles mostrados — el tamaño que la imagen
realmente ocupa en tu pantalla, que suele ser menor que su
tamaño real. Antes de cortar el recorte, esta herramienta
multiplica tu selección por la proporción entre naturalWidth/naturalHeight reales de
la imagen y su tamaño mostrado, y luego dibuja solo esa región
escalada en el canvas de salida con ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh).
Omitir ese paso de escalado es el error más común en
recortadores caseros — hace que el recorte descargado caiga en
el lugar equivocado o con el tamaño equivocado, porque usa
coordenadas de pantalla contra datos de píxeles reales.
Ejemplo práctico
Supongamos que una foto tiene un tamaño real de 1200 × 800 px pero se muestra en tu pantalla a 600 px de ancho (así que 400 px de alto) — un factor de escala de 2× en ambas direcciones. Arrastras un marco desde la posición mostrada (100, 50) hasta (300, 200) — una selección de 200×150 en pantalla. Multiplicando por el factor de escala 2× obtenemos una región de origen real que empieza en (200, 100) y llega hasta (600, 400) — un recorte de 400×300 cortado de la imagen real a resolución completa, que coincide exactamente con lo que viste seleccionado en pantalla.
Preguntas frecuentes
¿El recorte coincide exactamente con lo que arrastré en pantalla?
Sí. Las imágenes grandes suelen mostrarse más pequeñas que su tamaño real en píxeles, así que la herramienta escala tu selección en pantalla por la proporción entre las dimensiones reales (naturales) de la imagen y sus dimensiones mostradas antes de cortar el recorte final. Si una foto de 4000px de ancho se muestra a 800px en tu pantalla, tu selección se multiplica por 5× en cada dirección — así siempre obtienes los píxeles que realmente viste y arrastraste.
¿La imagen se sube para recortarla?
No. El recorte se dibuja directamente desde la imagen cargada sobre un <canvas> dentro de la página, usando la propia API Canvas del navegador, y el resultado se convierte en un archivo descargable con canvas.toBlob(). Nada se envía a un servidor en ningún momento.
¿Qué hacen las relaciones de aspecto preestablecidas?
Cuadrado, 16:9, 4:3 y 3:2 restringen el marco que arrastras para que siempre mantenga esa relación, útil para fotos de perfil (cuadrado), miniaturas de video (16:9), o impresiones estándar (4:3, 3:2). "Libre" quita la restricción para que puedas arrastrar cualquier rectángulo.
¿Puedo rehacer mi selección?
Sí — solo arrastra un nuevo rectángulo; la selección y la vista previa anteriores se reemplazan automáticamente. Nada se guarda hasta que hagas clic en el enlace de descarga, así que puedes probar tantos recortes como quieras antes de decidir.