Cortador de Imagem (Image Cropper)
O Cortador de Imagem permite recortar imagens diretamente no navegador, sem upload, preservando a privacidade. Você pode ajustar a área de corte com precisão em pixels.
O Cortador de Imagem é uma ferramenta que realiza o corte de imagens no lado do cliente usando a API OffscreenCanvas, garantindo que nenhum dado seja enviado a servidores externos. A ferramenta utiliza o método ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh) para extrair uma região específica da imagem, com controle preciso das coordenadas X, Y e das dimensões de largura e altura do corte. O processamento ocorre inteiramente no navegador, o que aumenta a segurança e a privacidade dos seus arquivos. Além disso, mantém o formato original da imagem, como JPEG com 92% de qualidade ou PNG. Para manipulação adicional, você pode combinar o uso com as ferramentas Redimensionar Imagem e Rotacionar Imagem.
Como Usar o Cortador de Imagem
- Carregue a imagem desejada no navegador, suportando formatos comuns como JPEG e PNG.
- Defina a área de corte ajustando os valores de X (origem horizontal), Y (origem vertical), Width (largura) e Height (altura) com precisão pixel a pixel.
- Visualize o recorte em tempo real no canvas dimensionado exatamente para a área selecionada.
- Clique em "Cortar" para gerar a imagem recortada mantendo o formato original e a qualidade (JPEG 92% ou PNG sem perdas).
- Faça o download do arquivo resultante diretamente no navegador, sem upload para servidores.
Como Funciona o Cortador de Imagem
A ferramenta utiliza a API OffscreenCanvas para processar imagens no lado do cliente. A função ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh) copia uma porção retangular da imagem original, onde sx e sy definem o ponto inicial do corte e sw e sh a largura e altura do recorte. Os valores são automaticamente limitados para não ultrapassar as dimensões da imagem, garantindo que 0 ≤ sx ≤ width, 0 ≤ sy ≤ height, e 1 ≤ sw ≤ width - sx. O resultado é renderizado em um canvas do tamanho do recorte, mantendo a qualidade e o formato do arquivo original, como JPEG com compressão de 92% ou PNG sem perdas. Todo processamento é local, sem transferência de dados para servidores externos, preservando sua privacidade.
Exemplo de Entrada e Saída
Entrada: imagem JPEG 1920x1080 pixels
Parâmetros de corte: sx=100, sy=50, sw=800, sh=600
Saída: imagem JPEG 800x600 pixels, qualidade 92%Quando Usar o Cortador de Imagem
- Desenvolvedores que precisam extrair partes específicas de imagens para thumbnails ou previews.
- Designers ajustando imagens para layouts responsivos com cortes precisos em pixels.
- Especialistas em SEO que desejam otimizar imagens reduzindo áreas irrelevantes mantendo a qualidade original.
- Estudantes ou pesquisadores que precisam isolar regiões de interesse em imagens para análise.
Para tarefas adicionais, experimente também as ferramentas Inverter Imagem e Adicionar Marca d'Água.
Perguntas Frequentes
Quais formatos de imagem o Cortador de Imagem suporta?
O Cortador de Imagem suporta os formatos JPEG e PNG. A saída mantém o formato original, aplicando compressão de 92% para JPEG ou preservando PNG sem perdas.
Como o corte é realizado tecnicamente?
O corte utiliza ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh) da API Canvas para copiar uma região retangular da imagem, onde sx e sy definem a origem do corte e sw, sh as dimensões da área recortada.
O processamento da imagem é feito online ou localmente?
Todo o processamento ocorre localmente no navegador usando OffscreenCanvas, o que significa que nenhuma imagem é enviada a servidores externos, garantindo a privacidade dos seus dados.
Posso definir o corte com precisão em pixels?
Sim, você pode controlar pixel a pixel os valores de X, Y, Width e Height para definir exatamente a área desejada para o recorte.
O que acontece se eu definir valores de corte fora dos limites da imagem?
Os valores de corte são automaticamente limitados para não ultrapassar as dimensões da imagem original, garantindo que o recorte seja sempre válido.