Imagem / Oficina de fotos
Slider de antes e depois
Faça uma comparação de antes e depois com rótulos editáveis e um slider ao vivo. Baixe um arquivo HTML portátil com as duas imagens incluídas, uma transição animada em GIF ou um WebM quando houver suporte.
Slider de antes e depois: Usa as proporções da imagem de antes e recorta a imagem de depois pelo centro para ajustá-la. O download em HTML contém as duas imagens PNG como data URIs e seu próprio controle deslizante de intervalo acessível pelo teclado. As transições em GIF cabem em 480 por 480 pixels; as transições em WebM são gravadas por cerca de dois segundos quando a gravação pelo navegador está disponível. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Ferramentas de imagem
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
Roda inteiramente no seu navegador
Comparação em tempo real
Escolha as duas fotos para compará-las.
A gravação em WebM não está disponível neste navegador. Baixe a transição em GIF.
Comparação portátil
As duas imagens são normalizadas para as mesmas proporções e incorporadas ao HTML como data URIs PNG. Um campo nativo de intervalo controla a área visível da imagem posterior e aceita as setas do teclado. O arquivo contém JavaScript incorporado, que pode ser bloqueado por políticas de hospedagem restritivas.
Exportações animadas
A disponibilidade de WebM é verificada antes da gravação. GIF é a alternativa quando WebM ou a captura do canvas não está disponível. Verificação de suporte a MediaRecorder: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static
Como usar
- Escolha as fotos de antes e depois.
- Adicione rótulos e mova o slider de comparação.
- Baixe o HTML para obter um slider interativo, ou GIF ou WebM compatível para obter uma transição animada.
Privacidade e limitações
Suas entradas e imagens permanecem no navegador. Nada é enviado.
Ferramentas relacionadas
Perguntas frequentes
O HTML funciona offline?
Sim. Ele inclui as duas imagens e o código do slider em um único arquivo, sem fazer solicitações externas.
Por que o WebM está desativado?
O navegador precisa oferecer suporte à gravação em WebM e à captura do canvas. Quando esses recursos não estão disponíveis, use a transição em GIF.
Qual é a diferença entre esta ferramenta e o slider de comparação de imagens?
Esta página exporta um slider HTML funcional e transições animadas. O slider de comparação de imagens exporta um PNG estático, incluindo layouts lado a lado.
Ferramenta grátis · no seu navegador execuções · não precisa de conta