Generador de filtros CSS

Cada generador de filtros CSS te permite apilar desenfoque(), brillo(), contraste() y el resto, pero casi ninguno de ellos deja que el orden importe, porque la mayoría solo aplica filtros en una secuencia fija. Esta es diferente: la cadena de filtros es una lista real y reordenable construida con HTML5 nativo de arrastrar y soltar, y reordenar dos funciones realmente cambia los píxeles renderizados, exactamente como lo haría en CSS de producción. Desenfocar y luego rotar con tono se ve diferente de rotar y desenfocar, y ahora puedes ver por qué antes de enviarlo.

Cargue su propia foto y las nueve funciones encadenables (desenfoque, brillo, contraste, saturación, rotación de tono, sepia, escala de grises, inversión y sombra paralela) se aplican en vivo como una declaración CSS de "filtro" real en un elemento "<img>", no una muestra simulada. Agregue una función desde la selección, arrastre su fila hacia arriba o hacia abajo en la lista para cambiar su posición en la cadena, ajuste su control deslizante y la vista previa y la línea copiable `filtro: ...;` se actualizan en cada entrada. Elimina un paso con su propio botón, justo ahí en la fila.

Una segunda cadena más pequeña crea un valor de "filtro de fondo" aplicado a un panel superpuesto colocado sobre la vista previa, para que pueda ver el efecto de vidrio esmerilado (la técnica detrás de las modernas barras de navegación translúcidas y fondos modales) sin tocar la propia cadena de filtros de la imagen subyacente. Funciona incluso antes de cargar una foto, sobre el fondo colorido del marcador de posición, por lo que puedes marcar un diseño de panel esmerilado en segundos.

Cuando la vista previa se vea bien, copie el CSS directamente desde el cuadro de salida o exporte un PNG real: la misma cadena de filtro se pasa a la propiedad `ctx.filter` de un contexto Canvas 2D, que usa la misma sintaxis que la propiedad `filter` de CSS, y el lienzo se convierte en un archivo descargable con `canvas.toBlob()`. La imagen exportada coincide exactamente con la vista previa en vivo, porque es producida por la misma cadena de filtro que se ejecuta a través de la misma primitiva de renderizado. Todo sucede localmente en tu navegador; Tu foto nunca se sube a ningún lado.