מחולל CSS Filter
בנה שרשרת ניתנת לסידור מחדש של פונקציות filter() ו-backdrop-filter() וצפה בה בתצוגה מקדימה חיה על תמונה שהעלית, עם שורת CSS להעתקה וייצוא PNG.
🔒 מעובד כולו בדפדפן שלך - שום דבר שתזין כאן לא יועלה לעולם.
תוצאה
כל מחולל CSS filter נותן לך לערום blur(), brightness(), contrast() והשאר — אבל כמעט אף אחד מהם לא נותן לסדר להיות משמעותי, כי רובם מיישמים את הפילטרים רק בסדר קבוע אחד. כאן זה שונה: שרשרת הפילטרים היא רשימה אמיתית וניתנת לסידור מחדש, הבנויה על גרירה ושחרור מקוריים ב-HTML5, ושינוי סדר של שתי פונקציות משנה באמת את הפיקסלים המעובדים, בדיוק כמו ב-CSS בסביבת ייצור. טשטוש-ואז-סיבוב-גוון נראה שונה מסיבוב-גוון-ואז-טשטוש, ועכשיו אתה יכול לראות למה לפני שאתה שולח.
העלה/י תמונה משלך ותשע הפונקציות הניתנות לשרשור — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert ו-drop-shadow — מוחלות עליה בשידור חי כהצהרת `filter` CSS אמיתית על אלמנט `<img>`, לא כדוגמית מדומה. הוסף פונקציה מהבחירה, גרור/י את השורה שלה למעלה או למטה ברשימה כדי לשנות את מיקומה בשרשרת, כוונן/י את המחוון שלה, והתצוגה המקדימה ושורת ה-`filter: ...;` הניתנת להעתקה מתעדכנות בכל קלט. הסר/י שלב עם הכפתור שלו עצמו, ממש שם בשורה.
שרשרת שנייה וקטנה יותר בונה ערך `backdrop-filter` המיושם על פאנל שכבת-על הממוקם מעל התצוגה המקדימה, כך שתוכל/י לראות את אפקט הזכוכית החלבית — הטכניקה שמאחורי סרגלי ניווט שקופים מודרניים ורקעים של חלונות קופצים — מבלי לגעת בשרשרת הפילטרים של התמונה עצמה. זה עובד עוד לפני שהעלית תמונה, מול רקע ברירת המחדל הססגוני, כך שתוכל/י לכוונן עיצוב פאנל חלבי תוך שניות.
כשהתצוגה המקדימה נראית טוב, העתק/י את ה-CSS ישירות מתיבת הפלט, או ייצא/י PNG אמיתי: אותה מחרוזת פילטר מועברת למאפיין `ctx.filter` של הקשר Canvas 2D — שמשתמש בתחביר הזהה למאפיין ה-`filter` של CSS — והקנבס מומר לקובץ להורדה באמצעות `canvas.toBlob()`. התמונה המיוצאת תואמת במדויק לתצוגה המקדימה החיה, משום שהיא נוצרת על ידי אותה מחרוזת פילטר שרצה דרך אותה פרימיטיבת עיבוד. הכל קורה מקומית בדפדפן שלך; התמונה שלך אף פעם לא מועלית לשום מקום.