Recortar imagen

Recortar consiste en seleccionar una región rectangular de una imagen y descartar todo lo que queda fuera. Es una de las operaciones de edición más antiguas porque cambia la composición sin remuestrear píxeles — un recorte de 1000×800 sobre una foto de 4000×3000 conserva intactos todos los píxeles originales dentro de esa región. Esta herramienta hace el recorte como lo haría un editor de escritorio: arrastra la selección sobre la vista previa, escribe valores exactos en los campos X/Y/W/H, bloquea una relación de aspecto cuando la salida debe encajar en un lienzo fijo (avatar, banner, foto de identificación) y exporta en PNG/JPEG/WebP. La rotación y el volteo se aplican después del recorte, de modo que el archivo guardado tenga ya la orientación deseada, algo fundamental para impresión y para aplicaciones que ignoran las etiquetas EXIF. Todo se ejecuta en tu navegador mediante Canvas — los bytes de la imagen nunca salen de la página, por lo que los documentos personales y las fotos permanecen en tu dispositivo.

Recortar es lógicamente simple — elegir un rectángulo, copiar sus píxeles, descartar el resto — pero hacerlo bien en el navegador tiene varias piezas móviles: la vista previa en pantalla es una versión reducida de la original, los manipuladores de arrastre operan en coordenadas de pantalla y el recorte real debe hacerse en las coordenadas de la imagen original para no perder calidad. Al cargar un archivo, la herramienta lo envuelve con URL.createObjectURL() para obtener una URL blob, luego se lo entrega a un HTMLImageElement para decodificar (cero copias, mucha menos memoria que una data URL en base64). El ancho y alto naturales (img.naturalWidth / naturalHeight) se convierten en el espacio de coordenadas canónico — cada X/Y/W/H almacenado en el estado se expresa en esos píxeles. La vista previa <img> usa max-width/max-height para que el navegador la escale y ajuste; en cada carga y redimensionamiento medimos el ancho renderizado mediante getBoundingClientRect() y almacenamos una relación displayScale (renderizado / natural). Los deltas del ratón durante el arrastre se dividen por esta relación para traducir el movimiento en pantalla de vuelta a píxeles originales, lo que mantiene la precisión del rectángulo de recorte independientemente de cuánto se haya reducido la imagen en pantalla. El cuadro de recorte es un <div> con posicionamiento absoluto superpuesto sobre la imagen. Sus 8 asas de redimensionamiento (cuatro esquinas + cuatro bordes) disparan cada una un pointerdown con un modo ('nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w' o 'move'); un listener pointermove a nivel de window (los pointer events cubren tanto ratón como touch) lee la posición en vivo del ratón, calcula el delta desde el inicio del arrastre, lo convierte a píxeles originales y recalcula left/top/right/bottom del rectángulo. Los arrastres de esquina redimensionan desde la esquina opuesta como ancla; los arrastres de borde mantienen fija la línea media perpendicular; los arrastres con relación bloqueada calculan primero el eje dominante y luego derivan el otro. Cada resultado se ajusta a los límites de la imagen con un tamaño mínimo de 10 px para que el rectángulo nunca se invierta ni escape del lienzo. La exportación utiliza dos lienzos fuera de pantalla. El primero tiene el tamaño del ancho × alto naturales del recorte; ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) usa la forma de 9 argumentos para extraer solo la región recortada — Chromium y Firefox transfieren esto por la GPU como una copia de textura, por lo que no hay remuestreo a menos que el tamaño de destino difiera. Si se solicita rotación o volteo, un segundo lienzo se dimensiona a los límites posteriores a la rotación (intercambiar ancho/alto para 90°/270°), el contexto se traslada a su centro, ctx.rotate(ángulo) y ctx.scale(±1, ±1) aplican la transformación, y el lienzo recortado se dibuja en el desplazamiento (-w/2, -h/2). Finalmente, canvas.toBlob(mimeType, quality) devuelve los bytes codificados como un Blob; URL.createObjectURL() lo convierte en una URL descargable. La calidad se ignora para PNG (sin pérdida) y se usa como indicación para el codificador de JPEG y WebP (0–1). La URL del blob se revoca cuando un nuevo recorte la reemplaza para evitar mantener datos de píxeles decodificados en memoria.

• Las coordenadas de recorte (X/Y/W/H) estan en pixeles originales.
• Todo el procesamiento se ejecuta a traves de la API Canvas en el navegador.
• El marco de recorte es un div posicionado absolutamente con 8 tiradores.
• La exportacion usa canvas fuera de pantalla con drawImage de 9 argumentos.
• Las URL Blob antiguas se revocan explicitamente en cada transicion de estado.