Penjana Penapis CSS

Setiap penjana penapis CSS membolehkan anda menyusun blur(), brightness(), contrast() dan selebihnya — tetapi hampir tiada satu pun daripada mereka membenarkan pesanan itu penting, kerana kebanyakannya hanya menggunakan penapis dalam satu urutan tetap. Yang ini berbeza: rantaian penapis ialah senarai sebenar yang boleh disusun semula yang dibina dengan seret dan lepas HTML5 asli dan susunan semula dua fungsi benar-benar mengubah piksel yang diberikan, sama seperti dalam CSS pengeluaran. Kabur-kemudian-rona-putar kelihatan berbeza daripada rona-putar-kemudian-kabur, dan kini anda boleh melihat sebabnya sebelum anda menghantarnya.

Muat naik foto anda sendiri dan sembilan fungsi boleh rantai — kabur, kecerahan, kontras, tepu, putar warna, sepia, skala kelabu, songsang dan bayang-bayang jatuh — gunakan secara langsung sebagai pengisytiharan CSS `penapis` sebenar pada elemen `<img>`, bukan swatch simulasi. Tambah fungsi daripada pilih, seret barisnya ke atas atau ke bawah senarai untuk menukar kedudukannya dalam rantai, laraskan peluncurnya dan pratonton serta kemas kini baris `penapis: ...;` yang boleh disalin pada setiap input. Alih keluar langkah dengan butangnya sendiri, di sana dalam baris.

Rantaian kedua yang lebih kecil membina nilai `penapis latar belakang` yang digunakan pada panel tindanan yang diletakkan di atas pratonton, supaya anda boleh melihat kesan kaca beku — teknik di sebalik bar navigasi lut sinar moden dan latar belakang mod — tanpa menyentuh rantai penapis imej dasar itu sendiri. Ia berfungsi walaupun sebelum anda memuat naik foto, dengan latar belakang pemegang tempat yang berwarna-warni, jadi anda boleh mendail dalam 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 Kanvas 2D — yang menggunakan sintaks yang sama dengan sifat `penapis` CSS — dan kanvas ditukar kepada fail yang boleh dimuat turun dengan `canvas.toBlob()`. Imej yang dieksport sepadan dengan pratonton langsung, kerana ia dihasilkan oleh rentetan penapis yang sama berjalan melalui pemaparan yang sama primitif. Semuanya berlaku secara setempat dalam penyemak imbas anda; foto anda tidak pernah dimuat naik ke mana-mana.