CSS-filtergenerator

Hver CSS-filtergenerator lader dig stable sløring(), lysstyrke(), kontrast() og resten - men næsten ingen af dem lader rækkefølgen betyde noget, fordi de fleste kun anvender filtre i én fast sekvens. Denne er anderledes: Filterkæden er en ægte, genbestillelig liste bygget med indbygget HTML5 træk-og-slip, og genbestilling af to funktioner ændrer reelt de gengivede pixels, præcis som det ville gøre i produktions-CSS. Blur-then-then-hue-rotate ser anderledes ud end nue-rotate-then-slør, og nu kan du se hvorfor, før du sender den.

Upload dit eget billede, og de ni funktioner, der kan kædes sammen – sløring, lysstyrke, kontrast, mættede, nuance-roter, sepia, gråtoner, inverter og drop-shadow – gælder live på det som en faktisk "filter" CSS-erklæring på et "<img>"-element, ikke en simuleret farveprøve. Tilføj en funktion fra markeringen, træk dens række op eller ned på listen for at ændre dens position i kæden, juster dens skyder, og forhåndsvisningen og det kopierbare `filter: ...;`-linje opdateres ved hvert input. Fjern et trin med sin egen knap, lige der i rækken.

En anden, mindre kæde opbygger en "baggrundsfilter"-værdi, der anvendes på et overlejringspanel placeret over forhåndsvisningen, så du kan se den matte glaseffekt - teknikken bag moderne gennemskinnelige navigationsbjælker og modale baggrunde - uden at røre ved det underliggende billedes egen filterkæde. Det fungerer, selv før du uploader et billede, mod den farverige pladsholder-baggrund, så du kan ringe ind i et frostet paneldesign på få sekunder.

Når forhåndsvisningen ser rigtig ud, kopier CSS direkte fra output-boksen, eller eksporter en rigtig PNG: den samme filterstreng overføres til en Canvas 2D-konteksts `ctx.filter`-egenskab – som bruger den identiske syntaks som CSS-`filter`-egenskaben – og lærredet konverteres til en fil, der kan downloades med `canvas.toBlob()`. Det eksporterede billede matcher den direkte forhåndsvisning nøjagtigt, fordi det er produceret af den samme filterstreng, der løber gennem den samme primitiv gengivelse. Alt sker lokalt i din browser; dit billede bliver aldrig uploadet nogen steder.