CSS-filtergenerator

Met elke CSS-filtergenerator kun je blur(), helderheid(), contrast() en de rest op elkaar stapelen - maar bijna geen van hen laat de volgorde er toe doen, omdat de meeste filters alleen in één vaste volgorde toepassen. Deze is anders: de filterketen is een echte, herschikbare lijst die is gebouwd met native HTML5-slepen en neerzetten, en het opnieuw ordenen van twee functies verandert echt de weergegeven pixels, precies zoals het zou gebeuren in productie-CSS. Vervagen en vervolgens de tint roteren ziet er anders uit dan de tint roteren en vervolgens vervagen, en nu kun je zien waarom voordat je het verzendt.

Upload uw eigen foto en de negen aan elkaar te koppelen functies (vervagen, helderheid, contrast, verzadigen, tint-roteren, sepia, grijstinten, omkeren en slagschaduw) passen er live op toe als een daadwerkelijke `filter` CSS-declaratie op een `<img>`-element, niet op een gesimuleerd staal. Voeg een functie toe uit de selectie, sleep de rij omhoog of omlaag in de lijst om de positie in de keten te wijzigen, pas de schuifregelaar aan en het voorbeeld en het kopieerbare `filter: ...;`-regel worden bij elke invoer bijgewerkt. Verwijder een stap met een eigen knop, precies daar in de rij.

Een tweede, kleinere keten bouwt een 'achtergrondfilter'-waarde op die wordt toegepast op een overlaypaneel dat over de voorvertoning is geplaatst, zodat u het matglaseffect kunt zien (de techniek achter moderne doorschijnende navigatiebalken en modale achtergronden) zonder de eigen filterketen van de onderliggende afbeelding aan te raken. Het werkt zelfs voordat u een foto uploadt, tegen de kleurrijke achtergrond van de tijdelijke aanduiding, zodat u binnen enkele seconden een mat paneelontwerp kunt instellen.

Wanneer het voorbeeld er goed uitziet, kopieert u de CSS rechtstreeks vanuit het uitvoervak, of exporteert u een echte PNG: dezelfde filterreeks wordt doorgegeven aan de `ctx.filter`-eigenschap van een Canvas 2D-context - die dezelfde syntaxis gebruikt als de CSS `filter`-eigenschap - en het canvas wordt geconverteerd naar een downloadbaar bestand met `canvas.toBlob()`. De geëxporteerde afbeelding komt exact overeen met de live preview, omdat deze wordt geproduceerd door dezelfde filterreeks die door dezelfde renderingprimitive loopt. Alles gebeurt lokaal in je browser; je foto wordt nooit ergens geüpload.