JS Module
SWCropper (Vários Modelos)
Diversos modelos práticos de recorte de imagem no navegador: Avatar Perfil (1:1), Banner/Capa (16:9), Imagem de Produto (4:3), Recorte Livre e Modal.
Modelo 1: Avatar Perfil (Proporção 1:1 Quadrada / Circular)
Ideal para fotos de perfil de usuários. Atualiza o círculo de preview em tempo real conforme você arrasta a área de corte.
Modelo 2: Banner / Capa de Artigo (Proporção 16:9 Widescreen)
Ideal para banners de posts, cabeçalhos de perfil ou capas de produtos (`sw-cropper-ratio="1.777"`).
Modelo 3: Foto de Produto / Galeria (Proporção 4:3)
Padroniza fotos de catálogos de e-commerce e galerias (`sw-cropper-ratio="1.333"`).
Modelo 4: Recorte Livre (Qualquer Proporção)
Com sw-cropper-ratio="0", a área de corte seleciona toda a extensão proporcional sem travar uma taxa fixa.
Modelo 5: Recorte em Janela Modal
Combinação do SWCropper com SWModal para alteração de fotos em popups limpos.
Quick Reference — Atributos e Ratios
| Valor em sw-cropper-ratio | Formato | Uso Recomendado |
|---|---|---|
1 | Quadrado 1:1 | Avatares, fotos de perfil, ícones de usuário. |
1.777 | Widescreen 16:9 | Banners de artigos, capas de vídeo, headers. |
1.333 | Foto Retangular 4:3 | Catálogos de produtos, cards de imóveis, galerias. |
0 | Proporção Livre | Qualquer formato flexível de recorte. |