Γεννήτρια φίλτρων CSS
Δημιουργήστε μια αναδιατάξιμη αλυσίδα από συναρτήσεις CSS filter() και backdrop-filter() και δείτε τη ζωντανά σε δική σας μεταφορτωμένη φωτογραφία, με αντιγράψιμη γραμμή CSS και εξαγωγή PNG.
🔒 Επεξεργάζεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — τίποτα που εισάγετε εδώ δεν μεταφορτώνεται ποτέ.
Αποτέλεσμα
Κάθε γεννήτρια φίλτρων CSS σας επιτρέπει να στοιβάζετε blur(), brightness(), contrast() και τα υπόλοιπα — αλλά σχεδόν καμία δεν αφήνει τη σειρά να έχει σημασία, γιατί οι περισσότερες εφαρμόζουν τα φίλτρα πάντοτε με την ίδια προκαθορισμένη σειρά. Αυτή εδώ είναι διαφορετική: η αλυσίδα φίλτρων είναι μια πραγματική, αναδιατάξιμη λίστα χτισμένη με native HTML5 drag-and-drop και η αναδιάταξη δύο συναρτήσεων αλλάζει πράγματι τα παραγόμενα pixel, ακριβώς όπως θα γινόταν σε παραγωγικό CSS. Το θόλωμα-μετά-απόχρωση δείχνει διαφορετικό από την απόχρωση-μετά-θόλωμα και τώρα μπορείτε να δείτε γιατί προτού το στείλετε.
Μεταφορτώστε τη δική σας φωτογραφία και οι εννέα συναρτήσεις σε αλυσίδα — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert και drop-shadow — εφαρμόζονται ζωντανά πάνω της ως μια πραγματική δήλωση `filter` CSS σε ένα στοιχείο `<img>`, όχι ως προσομοίωση. Προσθέστε μια συνάρτηση από το select, σύρετε τη γραμμή της πάνω ή κάτω στη λίστα για να αλλάξετε τη θέση της στην αλυσίδα, ρυθμίστε το slider της και η προεπισκόπηση και η αντιγράψιμη γραμμή `filter: ...;` ενημερώνονται σε κάθε είσοδο. Αφαιρέστε ένα βήμα με το δικό του κουμπί, ακριβώς εκεί στη γραμμή.
Μια δεύτερη, μικρότερη αλυσίδα χτίζει μια τιμή `backdrop-filter` που εφαρμόζεται σε ένα επικαλυπτόμενο πλαίσιο τοποθετημένο πάνω από την προεπισκόπηση, ώστε να μπορείτε να δείτε το εφέ παγωμένου γυαλιού — την τεχνική πίσω από τις σύγχρονες ημιδιάφανες μπάρες πλοήγησης και τα φόντα modals — χωρίς να πειράξετε την αλυσίδα φίλτρων της υποκείμενης εικόνας. Λειτουργεί ακόμη και πριν μεταφορτώσετε φωτογραφία, πάνω στο χρωματιστό φόντο placeholder, επιτρέποντάς σας να ρυθμίσετε ένα σχέδιο παγωμένου πάνελ σε δευτερόλεπτα.
Όταν η προεπισκόπηση δείχνει σωστά, αντιγράψτε το CSS κατευθείαν από το πλαίσιο εξόδου ή εξάγετε ένα πραγματικό PNG: το ίδιο string φίλτρου παραδίδεται στην ιδιότητα `ctx.filter` ενός περιβάλλοντος Canvas 2D — που χρησιμοποιεί την ίδια ακριβώς σύνταξη με την ιδιότητα `filter` του CSS — και το canvas μετατρέπεται σε αρχείο με δυνατότητα λήψης μέσω του `canvas.toBlob()`. Η εξαγόμενη εικόνα ταιριάζει ακριβώς με τη ζωντανή προεπισκόπηση, γιατί παράγεται από το ίδιο string φίλτρου που τρέχει μέσα από την ίδια βασική υποδομή απόδοσης. Όλα γίνονται τοπικά στον browser σας· η φωτογραφία σας δεν ανεβαίνει ποτέ πουθενά.