CSS फ़िल्टर जनरेटर

हर CSS फ़िल्टर जनरेटर आपको blur(), brightness(), contrast() और बाक़ी को स्टैक करने देता है — लेकिन लगभग कोई भी क्रम को मायने नहीं रखने देता, क्योंकि ज़्यादातर फ़िल्टर को सिर्फ़ एक निश्चित क्रम में लगाते हैं। यह अलग है: फ़िल्टर चेन एक असली, क्रम बदलने लायक सूची है जो नेटिव HTML5 ड्रैग-एंड-ड्रॉप से बनी है, और दो फ़ंक्शनों का क्रम बदलने से रेंडर पिक्सेल सचमुच बदल जाते हैं, ठीक वैसे ही जैसे प्रॉडक्शन CSS में होता है। blur-फिर-hue-rotate, hue-rotate-फिर-blur से अलग दिखता है, और अब आप इसे शिप करने से पहले देख सकते हैं कि ऐसा क्यों है।

अपनी खुद की फ़ोटो अपलोड करें और नौ चेन करने लायक फ़ंक्शन — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert और drop-shadow — एक असली `filter` CSS डिक्लेरेशन की तरह `<img>` एलिमेंट पर लाइव लागू होते हैं, किसी सिम्युलेटेड सैंपल पर नहीं। सेलेक्ट से कोई फ़ंक्शन जोड़ें, चेन में उसकी स्थिति बदलने के लिए उसकी पंक्ति को ऊपर-नीचे ड्रैग करें, उसका स्लाइडर एडजस्ट करें, और प्रीव्यू तथा कॉपी करने लायक `filter: ...;` लाइन हर इनपुट पर अपडेट हो जाती है। स्टेप को उसके अपने बटन से हटाएँ, ठीक पंक्ति में।

एक दूसरी, छोटी चेन एक `backdrop-filter` मान बनाती है जो प्रीव्यू के ऊपर रखे ओवरले पैनल पर लागू होता है, ताकि आप फ़्रॉस्टेड-ग्लास प्रभाव — वह तकनीक जो आधुनिक पारदर्शी नेविगेशन बार और मॉडल बैकग्राउंड के पीछे है — को अंतर्निहित इमेज की अपनी फ़िल्टर चेन को छुए बिना देख सकें। यह फ़ोटो अपलोड करने से पहले भी, रंगीन प्लेसहोल्डर बैकग्राउंड के ख़िलाफ़ काम करता है, ताकि आप सेकंडों में फ़्रॉस्टेड पैनल डिज़ाइन तैयार कर सकें।

जब प्रीव्यू सही लगे, तो CSS को सीधे आउटपुट बॉक्स से कॉपी करें, या एक असली PNG एक्सपोर्ट करें: वही फ़िल्टर स्ट्रिंग एक Canvas 2D कॉन्टेक्स्ट की `ctx.filter` प्रॉपर्टी को दी जाती है — जो कि CSS `filter` प्रॉपर्टी जैसा ही सिंटैक्स इस्तेमाल करती है — और कैनवस को `canvas.toBlob()` से डाउनलोड करने लायक फ़ाइल में बदल दिया जाता है। एक्सपोर्ट की गई इमेज लाइव प्रीव्यू से बिलकुल मेल खाती है, क्योंकि यह उसी फ़िल्टर स्ट्रिंग से बनती है जो उसी रेंडरिंग प्रिमिटिव से गुज़रती है। सब कुछ आपके ब्राउज़र में लोकल होता है; आपकी फ़ोटो कहीं अपलोड नहीं की जाती।