Como funciona o corte de imagens no navegador
O processo de corte é executado inteiramente dentro do separador do seu navegador usando a Canvas API. Sem processamento no servidor, sem uploads, sem serviços de terceiros. Cada passo acontece no seu dispositivo.
- Carregue a imagem num elemento
<img>para que o navegador a descodifique localmente. Uma tela sobreposta renderiza a imagem escalada para caber na janela de visualização enquanto um retângulo de seleção arrastável mostra a região de corte atual. - Arraste o retângulo pelos seus bordos ou cantos para ajustar a área de corte. O retângulo permanece preso aos limites da imagem para que não possa selecionar uma região fora da foto. Quando uma proporção fixa está ativa (1:1, 16:9, 4:3), o redimensionamento preserva essa proporção automaticamente.
- A leitura de píxeis é atualizada em tempo real enquanto arrasta, mostrando a largura, altura, X e Y atuais do corte em coordenadas de píxeis da imagem. Isto permite-lhe apontar para dimensões exatas sem adivinhação.
- Quando clica em Cortar e Descarregar, a página desenha apenas a região selecionada da imagem de origem numa tela fora do ecrã à resolução de píxeis original, depois exporta o resultado via
canvas.toBlob()no mesmo formato do ficheiro de origem. É gerado um URL Blob para o download.
Porquê cortar imagens online?
- Cortar elimina bordos indesejados, espaço vazio ou desordem visual. Um único corte melhora frequentemente a composição de uma foto mais do que qualquer filtro ou ajuste de cor.
- O controlo da proporção é essencial para plataformas de publicação. Os feeds de redes sociais esperam 1:1 para perfis, 16:9 para miniaturas de vídeo e 4:3 para fotografia padrão. Cortar com a proporção correta evita o incómodo letterboxing ou cortes ao fazer upload.
- O corte do lado do cliente é a única opção em dispositivos empresariais restritos que não têm um editor de fotos. Como nada é enviado, não há risco de fuga de dados nem necessidade de revisão de conformidade para imagens sensíveis.
- A leitura de dimensões em tempo real elimina a adivinhação. Vê as coordenadas de píxeis e o tamanho da seleção enquanto arrasta, para que possa cortar com uma largura e altura exatas sem mudar para uma ferramenta de medição de píxeis.
Aplicações comuns do corte
Cortar é uma das edições de imagem mais comuns na publicação web, redes sociais e desenvolvimento de software. Aqui estão três padrões onde um cortador baseado no navegador poupa tempo.
- Preparar fotos de produtos para uma loja online. Corte para uma proporção consistente 1:1 ou 4:5 para que cada miniatura de catálogo se alinhe na grelha. A exportação preserva o formato original, por isso as fotos de produto JPEG permanecem como JPEG.
- Cortar capturas de ecrã para documentação ou relatórios de erros. Corte a barra de ferramentas do navegador, a barra de tarefas do Windows ou notificações sensíveis antes de anexar a imagem a um ticket ou a um pull request.
- Enquadrar uma imagem principal ou banner para uma landing page. Bloqueie o preset 16:9, posicione a parte mais importante da foto no centro do retângulo de corte e exporte à resolução original para a melhor qualidade em ecrãs retina.
Um exemplo prático: cortar uma foto de 4000×3000 para 1200×675 para um banner principal
Uma foto de 4000×3000 píxeis de uma câmara digital é demasiado grande para um banner web típico. O espaço do banner pode ser de 1200×675 (um formato 16:9).
Solte a foto na zona de upload. A imagem é carregada à resolução completa mas é escalada para caber na janela de visualização para uma interação de arrasto confortável. Selecione o preset de proporção 16:9. O retângulo de corte ajusta-se instantaneamente à maior região 16:9 que caiba na imagem. Arraste o retângulo para posicionar o ponto focal — um pico de montanha, um produto, o rosto de uma pessoa — no enquadramento. A leitura em tempo real mostra a seleção atual a 4000×2250 (a janela 16:9 da imagem completa). Pegue num controlador de canto e arraste para dentro até que a leitura de largura atinja 1200 px. A altura segue automaticamente porque a proporção está bloqueada. Clique em Cortar e descarregar. A página extrai a região selecionada de 1200×675 dos píxeis originais e entrega o ficheiro cortado no formato de origem. Todo o processo leva um ou dois segundos e não usa largura de banda de rede além do carregamento inicial da página.
Que formatos de imagem são suportados para corte?
A ferramenta aceita qualquer formato que o navegador possa descodificar: PNG, JPEG e WebP cobrem quase todos os casos de uso reais. A saída cortada é guardada no mesmo formato do ficheiro de origem. PNG permanece sem perdas, JPEG conserva o seu nível de qualidade original e WebP continua a ser WebP. O formato é detetado a partir do tipo MIME do ficheiro de origem.
O corte reduz o tamanho do ficheiro de imagem?
Cortar remove píxeis, por isso o tamanho do ficheiro de saída é tipicamente menor que o de origem, especialmente quando corta um bordo grande ou uma área vazia. A exportação usa o formato de ficheiro original e os seus parâmetros de codificação — PNG permanece sem perdas, JPEG mantém a sua configuração de qualidade original — pelo que a única poupança vem da redução de píxeis, não da recompressão.
O que fazem os presets de proporção?
Os presets (1:1, 16:9, 4:3, 3:2, 9:16) bloqueiam a relação largura-altura do retângulo de corte. Quando um preset está ativo, arrastar qualquer canto ou bordo ajusta o tamanho da seleção mantendo a proporção constante. Mudar para o modo Livre remove a restrição para que possa redimensionar o retângulo arbitrariamente. A proporção é aplicada em coordenadas de píxeis da imagem, por isso a saída exportada tem exatamente a proporção que selecionou.
A imagem é enviada para um servidor?
Não. A imagem nunca sai do seu dispositivo. A página usa a File API do navegador para ler a imagem na memória e a Canvas API para cortar e exportar o resultado. Pode verificar isto abrindo o painel Network das DevTools do seu navegador — os únicos pedidos de saída durante o corte são o carregamento inicial da página e as chamadas de anúncios. Não são transmitidos dados de imagem.
Posso cortar uma área específica inserindo coordenadas exatas de píxeis?
A versão atual ajusta o retângulo de corte através de interação de arrasto na pré-visualização da imagem. Pode ler as coordenadas de píxeis em tempo real para X, Y, largura e altura da seleção. A entrada numérica direta para o retângulo de corte não está disponível na v1, mas é uma melhoria planeada para uma futura atualização.
O que acontece à imagem original?
O ficheiro original permanece no seu dispositivo. A página lê-o na memória do navegador para visualização e corte, mas nunca modifica o ficheiro de origem no disco. A saída cortada é um novo ficheiro que descarrega separadamente. O original permanece intacto na sua localização original no seu computador ou telemóvel.
Existe um limite de tamanho de ficheiro para cortar?
A ferramenta respeita um limite de 30 MB por ficheiro na zona de upload para manter a memória do navegador sob controlo em dispositivos de gama baixa. Se a sua imagem for maior que 30 MB, pode redimensioná-la primeiro usando uma ferramenta dedicada de redimensionamento de imagens antes de a carregar aqui para cortar.
O corte funciona em telemóveis e tablets?
Sim. Os controlos de corte são dimensionados com alvos táteis em mente, e a interação usa eventos pointer que funcionam tanto com cliques de rato como com toques de dedo. Num ecrã de telemóvel, a pré-visualização da imagem adapta-se à largura disponível e os controlos empilham-se verticalmente para fácil utilização com uma mão.