Recortar imagem

Recortar é extrair uma região retangular da imagem e descartar tudo o que está fora dela. É uma das operações de edição mais antigas justamente porque muda a composição sem reamostrar pixels — uma região de 1000×800 tirada de uma foto 4000×3000 preserva todos os pixels originais que ficaram dentro da seleção. Esta página recorta como faria um editor de desktop: arraste a seleção sobre a prévia, digite valores exatos em X/Y/W/H, trave uma proporção quando a saída precisa caber num formato fixo (avatar, banner, foto 3×4) e exporte em PNG/JPEG/WebP. Rotação e espelhamento são aplicados depois do recorte, então o arquivo salvo já sai com a orientação que você quer — algo importante para impressão e para apps que ignoram a tag de orientação EXIF. Tudo roda no navegador via Canvas — os bytes da imagem não saem da página, então documentos pessoais e fotos ficam no seu dispositivo.

Recortar é logicamente simples — escolher um retângulo, copiar seus pixels e jogar o resto fora —, mas fazer isso direito no navegador envolve algumas peças em movimento: a pré-visualização na tela é uma versão reduzida do original, os manipuladores de arrasto operam em coordenadas de exibição e o recorte de verdade precisa acontecer em coordenadas da imagem original para não perder qualidade. Quando você carrega um arquivo, a ferramenta envolve com URL.createObjectURL() para obter uma URL blob e entrega a um HTMLImageElement para decodificação (zero-copy, muito menos memória que uma data URL em base64). A largura e a altura naturais (img.naturalWidth / naturalHeight) viram o espaço de coordenadas canônico — todo X/Y/W/H guardado no estado fica nessas unidades. O <img> de preview usa max-width/max-height para que o navegador o ajuste ao container; a cada carga e a cada resize, medimos a largura renderizada via getBoundingClientRect() e guardamos um displayScale (renderizado / natural). Os deltas do mouse durante o arrasto são divididos por essa razão para converter o movimento na tela de volta para pixels originais, e é isso que mantém o retângulo de recorte preciso mesmo com a imagem bem reduzida no preview. A caixa de recorte em si é uma <div> posicionada absolutamente em cima da imagem. Seus oito manipuladores (quatro cantos + quatro laterais) disparam pointerdown com um modo ('nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w' ou 'move'); um listener pointermove no nível window (pointer events cobrem mouse e toque) lê a posição atual do mouse, calcula o delta a partir do início do arrasto, converte para pixels originais e recalcula left/top/right/bottom do retângulo. Arrasto de canto redimensiona ancorado no canto oposto; arrasto de lateral preserva a meia-altura/largura perpendicular; arrasto com proporção travada calcula primeiro o eixo dominante e deriva o outro. Cada resultado é limitado aos limites da imagem com um tamanho mínimo de 10 px, de modo que o retângulo nunca se inverta nem ultrapasse o canvas. A exportação roda em dois canvas fora da tela. O primeiro tem o tamanho natural do recorte (largura × altura); ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) na forma de 9 argumentos puxa apenas a região recortada — Chromium e Firefox fazem essa cópia pela GPU como cópia de textura, sem reamostragem quando o destino tem o mesmo tamanho. Se houver rotação ou espelhamento, um segundo canvas é dimensionado pela bounding box pós-rotação (troca largura/altura para 90°/270°), o contexto é transladado para o centro, ctx.rotate(angle) e ctx.scale(±1, ±1) aplicam a transformação e o canvas recortado é desenhado em (-w/2, -h/2). Por fim, canvas.toBlob(mimeType, quality) devolve os bytes codificados como Blob; URL.createObjectURL() vira a URL para download. O quality é ignorado em PNG (sem perdas) e usado como dica do encoder em JPEG e WebP (0–1). O object URL do blob é revogado quando um novo recorte o substitui, para não deixar pixels decodificados pendurados na memória.

• As coordenadas de recorte (X/Y/W/H) estao em pixels originais.
• Todo o processamento e executado via Canvas API no navegador.
• A caixa de recorte e um div posicionado absolutamente com 8 alcas.
• A exportacao usa canvas off-screen com drawImage de 9 argumentos.
• URLs Blob antigas sao explicitamente revogadas a cada transicao de estado.