Como ele é
A tela se divide entre a foto e um painel com três abas: Recorte, Ajustes e Filtros. Sobre a foto, um quadro branco com grade de terços e oito alças marca o recorte, e o que fica fora escurece. Girar e espelhar vêm com uma animação curta. Os ajustes são barras deslizantes, e os filtros, como Vívido, Cinema e Noir, aparecem em miniaturas feitas com a própria foto. Segurar um botão mostra o original para comparar. Com espaço, o painel fica ao lado da foto; em larguras menores, embaixo. O botão Exportar baixa o arquivo e mostra as dimensões e o peso.
Você pode estar procurando isto se pediu algo assim
- recortar a foto de perfil antes de enviar, igual nas redes sociais
- editor de imagem simples dentro do meu sistema
- deixar a pessoa cortar a foto em quadrado ou 4:5 no site
- aplicar filtro tipo Instagram na foto antes de salvar
- ajustar brilho e contraste da imagem no próprio app
- girar e cortar a foto do documento antes do upload
- ferramenta para editar a imagem do post sem sair da página
Também chamado de
- image editor
- editor de imagem
- image cropper
- recorte de imagem
- photo editor
- filtros de foto
- crop and filter
Quando usar
- Foto de perfil de pacientes, profissionais e clientes
- Envio de fotos de documentos, prontuários e comprovantes
- Criação de posts e imagens de marca dentro de um painel
- Cadastro de produtos em lojas, com recorte padronizado
Quando evitar
- Edição profissional com camadas, texto ou retoque, que o editor não faz
- Imagens de outro domínio sem CORS liberado, que não podem ser editadas
Como pedir para a sua IA
Adicione um editor de imagem à tela de foto de perfil: recorte 1:1 com alças e teclado, girar, ajustes de brilho e contraste, filtros com prévia em WebGL e reserva em Canvas 2D, exportação em JPEG, carregamento sob demanda e cores da minha marca.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Prancheta
Prancheta envia a foto para o servidor?
Não. Prancheta roda inteiramente no navegador, sem rede: abre arquivos locais e devolve a imagem editada como data URL no evento export, com tipo, largura, altura e tamanho em bytes. O envio para o seu servidor ou armazenamento fica a cargo do seu código, que a IA pode montar a partir desse evento.
Prancheta funciona sem WebGL e no celular?
Funciona. Prancheta tenta WebGL2, depois WebGL1, e passa para Canvas 2D quando nenhum está disponível. No celular, as alças do recorte respondem ao dedo e o painel vai para baixo da foto. Imagens maiores que 4096 px são reduzidas ao abrir, para caber na placa de vídeo.
Como usar Prancheta no Nuxt?
O prompt do THM Componentes pede para envolver Prancheta em ClientOnly com um fallback estático, imagem ou cor, e carregar sob demanda, já que o componente depende de canvas e WebGL. A imagem inicial vem da prop src e precisa estar no mesmo domínio ou ter CORS liberado.
