Gerador de filtro CSS

Cada gerador de filtro CSS permite empilhar blur(), brilho(), contraste() e o resto - mas quase nenhum deles deixa a ordem importante, porque a maioria só aplica filtros em uma sequência fixa. Este é diferente: a cadeia de filtros é uma lista real e reordenável construída com arrastar e soltar HTML5 nativo, e reordenar duas funções altera genuinamente os pixels renderizados, exatamente como faria no CSS de produção. Desfocar e girar em seguida parece diferente de girar em seguida e desfocar, e agora você pode ver o porquê antes de enviá-lo.

Carregue sua própria foto e as nove funções encadeadas - desfoque, brilho, contraste, saturação, rotação de matiz, sépia, escala de cinza, inversão e sombra projetada - aplicam-se ao vivo a ela como uma declaração CSS de `filtro` real em um elemento `<img>`, não uma amostra simulada. Adicione uma função da seleção, arraste sua linha para cima ou para baixo na lista para alterar sua posição na cadeia, ajuste seu controle deslizante e a visualização e a linha `filter: ...;` copiável são atualizadas em cada entrada. Remova uma etapa com seu próprio botão, ali mesmo na linha.

Uma segunda cadeia menor cria um valor de `filtro de fundo` aplicado a um painel de sobreposição posicionado sobre a visualização, para que você possa ver o efeito de vidro fosco - a técnica por trás das modernas barras de navegação translúcidas e fundos modais - sem tocar na própria cadeia de filtros da imagem subjacente. Funciona mesmo antes de você enviar uma foto, contra o fundo colorido do espaço reservado, para que você possa definir um design de painel fosco em segundos.

Quando a visualização parecer correta, copie o CSS diretamente da caixa de saída ou exporte um PNG real: a mesma string de filtro é entregue à propriedade `ctx.filter` de um contexto Canvas 2D - que usa a sintaxe idêntica à propriedade `filter` do CSS - e a tela é convertida em um arquivo para download com `canvas.toBlob()`. A imagem exportada corresponde exatamente à visualização ao vivo, porque é produzida pela mesma sequência de filtros que passa pela mesma primitiva de renderização. Tudo acontece localmente no seu navegador; sua foto nunca é carregada em lugar nenhum.