Avatar circular a partir de foto retangular
- Entrada
- Foto 1600x900, forma círculo, modo crop
- Saída esperada
- Recorte central quadrado de 900x900 antes do círculo
O quadrado de origem garante um círculo de verdade, não uma elipse esticada.
cantos arredondados e avatares
Um avatar circular a partir de uma foto retangular não é só desenhar uma elipse encaixada no retângulo: uma elipse deformada por uma foto não quadrada sai oval, não redonda. Essa ferramenta primeiro decide o quadrado de origem (por recorte central ou por encaixe com barras) e só depois aplica a forma circular ou os cantos arredondados sobre esse quadrado.
O quadrado de origem garante um círculo de verdade, não uma elipse esticada.
50% é o teto da ferramenta: além disso o formato deixaria de ser um retângulo com cantos e viraria outra coisa.
Sem o preenchimento ao redor, um fundo sólido preenche tudo e o arredondamento vira, na prática, um no-op visual.
Se o fundo é transparente, a saída precisa de canal alfa: PNG (o mais compatível) ou WebP. O JPG não guarda transparência e por isso nem é oferecido nesse caso. Se você escolheu um fundo de cor sólida, não há transparência a preservar e o JPG gera um arquivo bem menor.
Porque um círculo aplicado direto sobre um retângulo não quadrado sai deformado; esta ferramenta corrige isso recortando (ou encaixando) a imagem num quadrado primeiro, e só então aplica a forma circular sobre esse quadrado.
Podem sair se o recorte usar o `clip()` padrão do Canvas 2D, que não é suavizado no Chromium; esta ferramenta evita isso desenhando a imagem inteira e compondo a forma por cima com `destination-in`, uma operação que aproveita a suavização do rasterizador em vez do caminho de recorte.
50% do lado mais curto da imagem; nesse ponto o canto ocupa metade do lado, o máximo de arredondamento possível sem o retângulo virar outra forma.
Porque sem espaço ao redor da forma, um fundo sólido preenche o retângulo inteiro por trás dela, e a área arredondada acaba coberta pela mesma cor do fundo, tornando o arredondamento visualmente imperceptível.
O arredondamento é feito inteiramente no seu navegador. Nenhuma imagem é enviada a qualquer servidor.