Cropper Componentes

Recorte de imagem 100% no navegador, via canvas — sem dependência externa.

O que é

Deixa o usuário escolher uma imagem, arrastar a área de corte e gerar um recorte final (útil pra avatar, capa, etc.) antes de enviar pro servidor.

Como funciona

Desenha a imagem original num canvas com uma máscara escura fora da área de corte; arrastar move a área (limitada às bordas do canvas). Ao cortar, gera um novo canvas só com a área selecionada e exporta como WebP. Sem sw-cropper-upload configurado (ou com valor "#"), fica em modo demo — gera o recorte local e não tenta enviar pra lugar nenhum.

Exemplos

Modo demo (sem servidor) — com prévia ao vivo e resultado final Ao vivo

1. Escolha uma imagem

2. Arraste o quadrado pra escolher a área

Prévia ao vivo (enquanto arrasta)

Resultado final (depois de "Cortar")

<div sw-cropper
     sw-cropper-ratio="1"
     sw-cropper-preview="#previa"
     sw-cropper-out="#resultado">
  <input type="file" accept="image/*" sw-cropper-input>
  <canvas sw-cropper-canvas></canvas>
  <button type="button" sw-cropper-btn>Cortar</button>
</div>

<!-- sw-cropper-preview: atualiza AO VIVO, a cada arraste -->
<div id="previa"></div>

<!-- sw-cropper-out: só recebe a imagem final, depois de clicar em "Cortar" -->
<img id="resultado">

Atributos

sw-cropper-ratio

proporção largura/altura da área de corte (padrão 1, quadrado)

sw-cropper-upload

URL do endpoint que recebe o recorte via FormData (POST) — sem isso, roda em modo demo

sw-cropper-preview

seletor de um elemento que recebe a prévia ao vivo como background

sw-cropper-out

seletor de <img>(s) que recebem o resultado final

Variantes

Nenhum.

Eventos

sw:cropper:ready

—

sw:cropper:done

{ url, thumb, id }

sw:cropper:error

{ erro }

API (JavaScript)

SW.Cropper.get(el)

retorna a instância pra chamar métodos diretamente

Requisitos

Pra upload real, o endpoint em sw-cropper-upload precisa aceitar POST multipart com o campo dataUrl e responder JSON { ok, img, thumb, id }.

Limitações — o que ele não faz

Não redimensiona/rotaciona a imagem antes do corte — só posiciona a área dentro da imagem no tamanho original.

← AnteriorLightbox Próximo →Lazy Load