Penjana Penapis CSS
Bina rantaian fungsi CSS filter() dan backdrop-filter() yang boleh disusun semula serta pratontonkannya secara langsung pada foto yang anda muat naik sendiri, dengan baris CSS yang boleh disalin dan eksport PNG.
🔒 Diproses sepenuhnya dalam penyemak imbas anda — tiada apa yang anda masukkan di sini pernah dimuat naik.
Keputusan
Setiap penjana penapis CSS membenarkan anda menindan blur(), brightness(), contrast() dan yang lain — tetapi hampir tiada yang membenarkan susunan itu penting, kerana kebanyakannya hanya menggunakan penapis dalam satu urutan tetap. Yang ini berbeza: rantaian penapis adalah senarai sebenar yang boleh disusun semula yang dibina dengan seret-dan-lepas HTML5 asli, dan menyusun semula dua fungsi benar-benar mengubah piksel yang dipaparkan, tepat seperti yang berlaku dalam CSS pengeluaran. Blur-kemudian-hue-rotate kelihatan berbeza daripada hue-rotate-kemudian-blur, dan kini anda boleh melihat sebabnya sebelum anda menghantarnya.
Muat naik foto anda sendiri dan sembilan fungsi yang boleh dirantaikan — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert dan drop-shadow — diguna pakai secara langsung kepadanya sebagai pengisytiharan CSS `filter` sebenar pada elemen `<img>`, bukan petak warna simulasi. Tambah satu fungsi daripada pilihan, seret barisnya ke atas atau ke bawah senarai untuk menukar kedudukannya dalam rantaian, laras peluncurnya, dan pratonton serta baris `filter: ...;` yang boleh disalin akan dikemas kini pada setiap input. Alih keluar langkah dengan butangnya sendiri, betul-betul di baris itu.
Rantaian kedua yang lebih kecil membina nilai `backdrop-filter` yang diguna pakai pada panel tindanan yang diletakkan di atas pratonton, supaya anda dapat melihat kesan kaca beku — teknik di sebalik bar navigasi lutsinar moden dan latar belakang modal — tanpa menyentuh rantaian penapis imej dasar itu sendiri. Ia berfungsi walaupun sebelum anda memuat naik foto, dengan latar belakang tampung yang berwarna-warni, jadi anda boleh mendail reka bentuk panel beku dalam beberapa saat.
Apabila pratonton kelihatan betul, salin CSS terus dari kotak output, atau eksport PNG sebenar: rentetan penapis yang sama diserahkan kepada sifat `ctx.filter` konteks Canvas 2D — yang menggunakan sintaks yang sama dengan sifat CSS `filter` — dan kanvas ditukar kepada fail yang boleh dimuat turun dengan `canvas.toBlob()`. Imej yang dieksport sepadan dengan tepat dengan pratonton langsung, kerana ia dihasilkan oleh rentetan penapis yang sama yang berjalan melalui primitif pemaparan yang sama. Semuanya berlaku secara setempat dalam pelayar anda; foto anda tidak pernah dimuat naik ke mana-mana.