CSS филтър генератор

Всеки генератор на CSS филтри ви позволява да стекате blur(), brightness(), kontrast() и останалите – но почти никой от тях не позволява редът да има значение, защото повечето прилагат филтри само в една фиксирана последователност. Този е различен: филтърната верига е истински списък с възможност за пренареждане, изграден с естествено плъзгане и пускане на HTML5, и пренареждането на две функции наистина променя изобразените пиксели, точно както би било в производствения CSS. Blur-then-hue-rotate изглежда различно от hue-rotate-then-blur и сега можете да разберете защо, преди да го изпратите.

Качете своя собствена снимка и деветте верижни функции – замъгляване, яркост, контраст, насищане, завъртане на нюанса, сепия, скала на сивото, обръщане и падаща сянка – приложете на живо към нея като действителна CSS декларация на „филтър“ върху елемент „<img>“, а не симулирана мостра. Добавете функция от селекцията, плъзнете нейния ред нагоре или надолу в списъка, за да промените позицията й във веригата, коригирайте нейния плъзгач и визуализацията и редът „filter: ...;“ с възможност за копиране се актуализират при всяко въвеждане. Премахнете стъпка със собствен бутон, точно там в реда.

Втора, по-малка верига изгражда стойност на `backdrop-filter`, приложена към панел с наслагване, позициониран над визуализацията, така че можете да видите ефекта на матирано стъкло – техниката зад модерните полупрозрачни навигационни ленти и модални фонове – без да докосвате собствената филтърна верига на основното изображение. Работи дори преди да качите снимка, на фона на цветния контейнер, така че можете да наберете матов панел за секунди.

Когато предварителният преглед изглежда добре, копирайте CSS направо от изходното поле или експортирайте истински PNG: същият филтърен низ се предава на свойството `ctx.filter` на Canvas 2D контекст — което използва идентичен синтаксис като свойството `filter` на CSS — и платното се преобразува във файл за изтегляне с `canvas.toBlob()`. Експортираното изображение съвпада точно с визуализацията на живо, тъй като е произведено от същия филтърен низ, преминаващ през същия примитив за изобразяване. Всичко се случва локално във вашия браузър; вашата снимка никога не се качва никъде.