Γεννήτρια φίλτρων CSS

Κάθε γεννήτρια φίλτρου CSS σάς επιτρέπει να στοιβάζετε το blur(), τη φωτεινότητα(), την αντίθεση() και τα υπόλοιπα — αλλά σχεδόν κανένα από αυτά δεν αφήνει τη σειρά να έχει σημασία, επειδή οι περισσότεροι εφαρμόζουν φίλτρα μόνο σε μια σταθερή ακολουθία. Αυτό είναι διαφορετικό: η αλυσίδα φίλτρων είναι μια πραγματική λίστα με δυνατότητα αναδιάταξης που έχει δημιουργηθεί με εγγενή μεταφορά και απόθεση HTML5 και η αναδιάταξη δύο συναρτήσεων αλλάζει πραγματικά τα εικονοστοιχεία που έχουν αποδοθεί, ακριβώς όπως θα έκανε στο CSS παραγωγής. Το Blur-then-hue-rotate φαίνεται διαφορετικό από το hue-rotate-then-blur και τώρα μπορείτε να δείτε γιατί προτού το στείλετε.

Ανεβάστε τη δική σας φωτογραφία και οι εννέα αλυσιδωτές λειτουργίες — θόλωση, φωτεινότητα, αντίθεση, κορεσμός, περιστροφή απόχρωσης, σέπια, κλίμακα του γκρι, αναστροφή και σκιά — εφαρμόζονται ζωντανά σε αυτήν ως πραγματική δήλωση CSS «φίλτρου» σε στοιχείο «<img>» και όχι προσομοιωμένο δείγμα. Προσθέστε μια συνάρτηση από την επιλογή, σύρετε τη σειρά της προς τα επάνω ή προς τα κάτω στη λίστα για να αλλάξετε τη θέση της στην αλυσίδα, προσαρμόστε το ρυθμιστικό της και την προεπισκόπηση και την αντιγραφή της γραμμής «φίλτρο: ...;» σε κάθε είσοδο. Αφαιρέστε ένα βήμα με το δικό του κουμπί, ακριβώς εκεί στη σειρά.

Μια δεύτερη, μικρότερη αλυσίδα δημιουργεί μια τιμή "φίλτρο φόντου" που εφαρμόζεται σε ένα πλαίσιο επικάλυψης τοποθετημένο στην προεπισκόπηση, ώστε να μπορείτε να δείτε το εφέ παγωμένου γυαλιού — την τεχνική πίσω από τις σύγχρονες ημιδιαφανείς ράβδους πλοήγησης και τα μοντέρνα φόντα — χωρίς να αγγίξετε την αλυσίδα φίλτρων της υποκείμενης εικόνας. Λειτουργεί ακόμη και πριν ανεβάσετε μια φωτογραφία, στο πολύχρωμο φόντο του σύμβολο κράτησης θέσης, ώστε να μπορείτε να καλέσετε σε ένα παγωμένο σχέδιο πίνακα σε δευτερόλεπτα.

Όταν η προεπισκόπηση φαίνεται σωστή, αντιγράψτε το CSS απευθείας από το πλαίσιο εξόδου ή εξάγετε ένα πραγματικό PNG: η ίδια συμβολοσειρά φίλτρου παραδίδεται στην ιδιότητα «ctx.filter» ενός περιβάλλοντος Canvas 2D — η οποία χρησιμοποιεί την ίδια σύνταξη με την ιδιότητα «φίλτρο» CSS — και ο καμβάς μετατρέπεται σε αρχείο με δυνατότητα λήψης με «canvas.toBlob». Η εξαγόμενη εικόνα ταιριάζει ακριβώς με τη ζωντανή προεπισκόπηση, επειδή παράγεται από την ίδια συμβολοσειρά φίλτρου που διατρέχει την ίδια πρωτόγονη απόδοση. Όλα συμβαίνουν τοπικά στο πρόγραμμα περιήγησής σας. Η φωτογραφία σας δεν μεταφορτώνεται ποτέ πουθενά.