# Prancheta Editor de fotos dentro da página para recortar, girar, ajustar brilho e cor, aplicar filtros e exportar a imagem. > Prancheta é um componente exclusivo do THM Componentes que coloca um editor de fotos dentro do app. A pessoa recorta em proporções como 1:1 e 4:5, gira, espelha, ajusta brilho, contraste, saturação, temperatura e vinheta, aplica filtros com prévia ao vivo em WebGL e exporta JPEG ou PNG. Serve para fotos de perfil e envio de imagens. - Categoria: Formulários e entrada - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/prancheta/ ## 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 ```text 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. ## Componentes relacionados - [Malote](https://vibecode.thmtecnologia.com/componentes/malote/): Área para arrastar arquivos ou clicar e escolher, com um cartão que se levanta e a lista dos arquivos escolhidos. - [Retoque](https://vibecode.thmtecnologia.com/componentes/retoque/): Duas imagens ou telas sobrepostas e uma linha no meio que você move com o mouse ou o dedo para comparar. - [Lambe-lambe](https://vibecode.thmtecnologia.com/componentes/lambe-lambe/): A foto vira pontinhos de impressão, como jornal ou gibi, e uma lupa mostra a imagem original. - [Anilina](https://vibecode.thmtecnologia.com/componentes/anilina/): Um seletor de cores completo, que mostra o que a tela consegue exibir, confere contraste e gera uma paleta. - [Tabelião](https://vibecode.thmtecnologia.com/componentes/tabeliao/): Área para a pessoa assinar com dedo, caneta ou mouse, com linha de base, nome, data e exportação da assinatura. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.