Cortador de Imagem grátis

Como funciona

O recorte acontece inteiramente no seu navegador usando a API HTML5 Canvas — sem envio, sem servidor. Arrasta uma região de seleção diretamente num elemento canvas, e quando aplica o recorte, o motor de renderização 2D integrado do navegador lê apenas os pixels selecionados e recodifica-os para JPEG, PNG, ou WebP.

1. 1
   Imagem carregada na memória

   Seu arquivo é lido com URL.createObjectURL(), que entrega ao navegador uma URL de blob local. Um HTMLImageElement decodifica o arquivo inteiramente na aba do navegador — os bytes da imagem nunca saem do seu dispositivo.
2. 2
   Os Pointer Events conduzem a seleção de recorte

   A Pointer Events API do navegador (que unifica entrada de mouse, toque e caneta) acompanha os arrastos em uma sobreposição do canvas. Pressionar fora da seleção inicia um novo retângulo; pressionar dentro o move; pressionar perto do canto inferior direito o redimensiona. Predefinições opcionais de proporção (1:1, 16:9, 4:3, etc.) restringem a geometria durante o arrasto.
3. 3
   O Canvas desenha a pré-visualização ao vivo

   A cada mudança de recorte, o contexto Canvas 2D redesenha a imagem, aplica uma sobreposição escura fora da seleção, limpa a região de recorte para mostrar a imagem original em fidelidade total, e sobrepõe uma grelha de regra dos terços e uma alça de redimensionamento verde-azulada.
4. 4
   O toBlob() codifica e entrega o resultado

   Quando você clica em Recortar, um novo canvas fora da tela é criado nas dimensões exatas do recorte. ctx.drawImage() copia apenas o retângulo selecionado, e canvas.toBlob() codifica o resultado usando o codificador nativo JPEG, PNG ou WebP do navegador na configuração de qualidade escolhida. A saída é entregue de volta como uma URL de blob local para download.

Ferramentas relacionadas