Generatore di filtri CSS

Ogni generatore di filtri CSS ti consente di impilare blur(), luminosità(), contrasto() e il resto, ma quasi nessuno di loro lascia che l'ordine abbia importanza, perché la maggior parte applica i filtri solo in una sequenza fissa. Questo è diverso: la catena di filtri è un elenco reale e riordinabile creato con il drag-and-drop nativo di HTML5 e il riordino di due funzioni modifica effettivamente i pixel renderizzati, esattamente come farebbe nei CSS di produzione. Sfoca e poi ruota la tonalità ha un aspetto diverso da Ruota e poi sfuma la tonalità e ora puoi capirne il motivo prima di spedirlo.

Carica la tua foto e le nove funzioni concatenabili (sfocatura, luminosità, contrasto, saturazione, rotazione tonalità, seppia, scala di grigi, inversione e ombra esterna) si applicano in tempo reale come una vera e propria dichiarazione CSS "filtro" su un elemento "<img>", non un campione simulato. Aggiungi una funzione dalla selezione, trascina la riga su o giù nell'elenco per modificarne la posizione nella catena, regola il cursore e l'anteprima e la riga copiabile `filter: ...;` si aggiornano su ogni input. Rimuovi un passaggio con il relativo pulsante, proprio lì nella riga.

Una seconda catena più piccola crea un valore di "filtro dello sfondo" applicato a un pannello di sovrapposizione posizionato sopra l'anteprima, in modo da poter vedere l'effetto vetro smerigliato (la tecnica dietro le moderne barre di navigazione traslucide e gli sfondi modali) senza toccare la catena di filtri dell'immagine sottostante. Funziona anche prima di caricare una foto, sullo sfondo colorato segnaposto, così puoi comporre un design del pannello smerigliato in pochi secondi.

Quando l'anteprima sembra corretta, copia il CSS direttamente dalla casella di output o esporta un vero PNG: la stessa stringa di filtro viene passata alla proprietà `ctx.filter` di un contesto Canvas 2D — che utilizza la sintassi identica alla proprietà `filter` CSS — e la tela viene convertita in un file scaricabile con `canvas.toBlob()`. L'immagine esportata corrisponde esattamente all'anteprima dal vivo, perché è prodotta dalla stessa stringa di filtro che attraversa la stessa primitiva di rendering. Tutto avviene localmente nel tuo browser; la tua foto non viene mai caricata da nessuna parte.