מחולל מסנני CSS

כל מחולל מסנני CSS מאפשר לך לערום טשטוש(), בהירות(), ניגודיות() וכל השאר - אבל כמעט אף אחד מהם לא נותן לסדר חשיבות, כי רובם מפעילים מסננים רק ברצף אחד קבוע. זה שונה: שרשרת הסינון היא רשימה אמיתית, הניתנת לסדר מחדש, הבנויה באמצעות גרירה ושחרור מקורית של HTML5, וסדר מחדש של שתי פונקציות משנה באמת את הפיקסלים המעובדים, בדיוק כפי שהיה עושה ב-CSS ייצור. טשטוש-אז-גוון-סובב נראה שונה מגוון-סובב-ואז-טשטוש, ועכשיו אתה יכול לראות מדוע לפני שאתה שולח אותו.

העלה תמונה משלך ותשע הפונקציות הניתנות לשרשרת - טשטוש, בהירות, ניגודיות, רוויה, גוון-סיבוב, ספיה, גווני אפור, היפוך וצללית - חלות עליה באופן חי כהצהרת CSS 'מסנן' על אלמנט '<img>', לא דוגמית מדומה. הוסף פונקציה מהבחירה, גרור את השורה שלה למעלה או למטה ברשימה כדי לשנות את מיקומה בשרשרת, כוונן את המחוון שלה, והתצוגה המקדימה והשורה 'מסנן: ...;' הניתן להעתקה מתעדכנת בכל קלט. הסר שלב עם כפתור משלו, ממש שם בשורה.

שרשרת שנייה וקטנה יותר בונה ערך 'מסנן רקע' המוחל על פאנל שכבת-על הממוקם מעל התצוגה המקדימה, כך שתוכל לראות את אפקט הזכוכית החלבית - הטכניקה מאחורי פסי ניווט שקופים מודרניים ורקעים מודאליים - מבלי לגעת בשרשרת הסינון של התמונה הבסיסית עצמה. זה עובד עוד לפני שאתה מעלה תמונה, על רקע מציין המיקום הצבעוני, כך שאתה יכול לחייג עיצוב פאנל חלבי תוך שניות.

כאשר התצוגה המקדימה נראית כמו שצריך, העתק את ה-CSS ישר מתיבת הפלט, או ייצא PNG אמיתי: אותה מחרוזת סינון נמסרת למאפיין `ctx.filter` של Canvas 2D - המשתמש בתחביר הזהה כמאפיין `filter` של CSS - והקנבס מומר לקובץ הניתן להורדה עם `canvas.toBlob()`. התמונה המיוצאת תואמת בדיוק את התצוגה המקדימה החיה, מכיוון שהיא מופקת על ידי אותה מחרוזת סינון שעוברת דרך אותו עיבוד פרימיטיבי. הכל קורה באופן מקומי בדפדפן שלך; התמונה שלך אף פעם לא מועלית לשום מקום.