सीएसएस फ़िल्टर जेनरेटर

प्रत्येक सीएसएस फ़िल्टर जनरेटर आपको ब्लर(), ब्राइटनेस(), कंट्रास्ट() और बाकी को स्टैक करने की सुविधा देता है - लेकिन उनमें से लगभग कोई भी ऑर्डर को मायने नहीं रखता है, क्योंकि अधिकांश केवल एक निश्चित अनुक्रम में फ़िल्टर लागू करते हैं। यह अलग है: फ़िल्टर श्रृंखला एक वास्तविक, पुन: व्यवस्थित करने योग्य सूची है जो मूल HTML5 ड्रैग-एंड-ड्रॉप के साथ बनाई गई है, और दो कार्यों को पुन: व्यवस्थित करने से वास्तव में रेंडर किए गए पिक्सेल बदल जाते हैं, ठीक वैसे ही जैसे यह उत्पादन सीएसएस में होता है। ब्लर-फिर-ह्यू-रोटेट, ह्यू-रोटेट-फिर-ब्लर से अलग दिखता है, और अब आप इसे शिप करने से पहले देख सकते हैं कि इसका कारण क्या है।

अपनी खुद की फोटो और नौ श्रृंखला योग्य फ़ंक्शन अपलोड करें - धुंधला, चमक, कंट्रास्ट, संतृप्त, ह्यू-रोटेट, सेपिया, ग्रेस्केल, इनवर्ट और ड्रॉप-शैडो - इसे `<img>` तत्व पर वास्तविक `फ़िल्टर` सीएसएस घोषणा के रूप में लाइव लागू करें, न कि एक सिम्युलेटेड स्वैच। चयन से एक फ़ंक्शन जोड़ें, श्रृंखला में इसकी स्थिति बदलने के लिए इसकी पंक्ति को ऊपर या नीचे खींचें, इसके स्लाइडर को समायोजित करें, और प्रत्येक इनपुट पर पूर्वावलोकन और कॉपी करने योग्य `फ़िल्टर: ...;` लाइन अपडेट करें। पंक्ति में ठीक उसी बटन से एक चरण हटाएँ।

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

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