श्रृंखला के तीसरे भाग में, आप सीखेंगे कि feComponentTransfer कैसे काम करता है और आप इस शक्तिशाली आदिम SVG फ़िल्टर का उपयोग करके छवियों को कैसे पोस्‍ट कर सकते हैं।

लेखों की प्रस्तावित श्रृंखला, "एसवीजी फ़िल्टरिंग इफेक्ट्स", सारा सॉइदन द्वारा, फ्रीलांस यूआई / यूएक्स इंटरफ़ेस डेवलपर और लेबनान में स्थित कई तकनीकी लेखों के लेखक, एसवीजी फिल्टर के काम पर केंद्रित है और इसमें निम्नलिखित लेख शामिल हैं:

एसवीजी फ़िल्टरिंग प्रभाव

1. एसवीजी फ़िल्टरिंग प्रभाव। भाग 1. एसवीजी फिल्टर 101
2. एसवीजी फ़िल्टरिंग प्रभाव। भाग 2. feMorphology के साथ पाठ की रूपरेखा
3. एसवीजी फ़िल्टरिंग प्रभाव। भाग 3. feComponentTransfer का उपयोग करके छवि पोस्टराइजेशन प्रभाव
4. SVG फ़िल्टर प्रभाव: DuComone छवियाँ feComponentTransfer के साथ ।
5. SVG फ़िल्टर प्रभाव: पाठ को सरफेस टेक्सचर के साथ feDisplacementMap के अनुरूप बनाना

यह लेख मानता है कि आप पहले से ही एसवीजी फिल्टर की मूल बातें से परिचित हैं या इस श्रृंखला में पहला लेख पढ़ चुके हैं - "एसवीजी फिल्म 101"। यदि आपने ऐसा नहीं किया है, तो कृपया अपना ज्ञानकोष भरने के लिए कुछ मिनटों के लिए स्वतंत्र महसूस करें।

feComponentTransfer सबसे शक्तिशाली एसवीजी फिल्टर प्रिमिटिव्स में से एक है। यह हमें अपने ग्राफिक्स स्रोत के अलग-अलग RGBA चैनलों पर नियंत्रण देता है, जिससे हमें SVG में फ़ोटोशॉप जैसे प्रभाव बनाने की अनुमति मिलती है। इस लेख में, जो feComponentTransfer पर लेख का पहला भाग है, हम इस आदिम से परिचित होंगे और देखें कि इसका उपयोग छवियों को पोस्ट करने के लिए कैसे किया जा सकता है।

एक छवि के पोस्टराइजेशन या कॉर्सनिंग में एक रंग से दूसरे रंग में तेज बदलाव के साथ, कई रंगों को कम रंगों की एक निरंतर रंग संक्रमण में परिवर्तित करना शामिल है। यह शुरुआत में पोस्टर बनाने के लिए फोटोग्राफिक प्रक्रियाओं का उपयोग करके किया गया था। - विकिपीडिया ।

पोस्टीरिएशन पूरे छवि में होता है, लेकिन सूक्ष्म रंग परिवर्तन के क्षेत्र में सबसे स्पष्ट है।

Ris_1। जेपीईजी प्रारूप में एक तस्वीर का उदाहरण (24-बिट रंग या 16.7 मिलियन रंग), जीआईएआर प्रारूप (256 रंग) में इसकी बचत के परिणाम के विपरीत, पोस्टराइजेशन से पहले। (स्रोत: विकिपीडिया)

इस लेख में, हम छवि में रंगों की संख्या को कम करने के लिए feComponentTransfer का उपयोग करेंगे, जो बदले में, एक अच्छा पोस्टर प्रभाव पैदा करेगा, जैसा कि हम वाणिज्यिक या ग्राफिक पोस्टर डिजाइनों में देखते हैं।

Ris_2। FeComponentTransfer के साथ बाईं ओर छवि पर पोस्टराइजेशन प्रभाव लागू करने से इस छवि (दाएं) में रंगों की संख्या कम हो जाती है।

लेकिन पहले, तकनीकी बुनियादी बातों पर विचार करें ...

एक नज़र में FeComponentTransfer

FeComponentTransfer आदिम आपको पिक्सेल में मौजूद प्रत्येक R , G , B और A घटक को बदलने की अनुमति देता है। दूसरे शब्दों में, feComponentTransfer ग्राफिक्स इनपुट पर अल्फा चैनल की तरह से प्रत्येक रंग चैनल को स्वतंत्र रूप से हेरफेर करने की अनुमति देता है। यह आपको चमक समायोजन, कंट्रास्ट समायोजन, रंग संतुलन या दहलीज सेटिंग को ठीक से नियंत्रित करने की अनुमति देता है।

RGBA घटकों को इन घटकों के स्थानांतरण कार्यों को करके संशोधित किया जाता है। इसके लिए, प्रत्येक घटक का अपना तत्व है जिसे ट्रांसफर फ़ंक्शन तत्व कहा जाता है। लेख के दौरान मैं इन तत्वों को " घटक तत्व " के रूप में संदर्भित करूंगा - अर्थात ऐसे तत्व जो व्यक्तिगत RGBA घटकों से संबंधित हैं। ये तत्व feComponentTransfer में नेस्टेड हैं। इसलिए feComponentTransfer व्यक्तिगत RGB घटक तत्वों के अलावा कुछ नहीं करता है। RGBA घटक तत्व हैं: feFuncR , feFuncG , feFuncB और feFuncA ।

प्रकार तत्व का उपयोग घटक तत्व में उस फ़ंक्शन के प्रकार को निर्धारित करने के लिए किया जाता है जिसे आप इस घटक को संशोधित करने के लिए उपयोग करना चाहते हैं। वर्तमान में पांच प्रकार के कार्य हैं: पहचान , तालिका , असतत , रैखिक और गामा । इस प्रकार के कार्यों का उपयोग R / G / B / A ग्राफिक्स स्रोत के घटकों को संशोधित करने के लिए किया जाता है। हम इस श्रृंखला में उनमें से अधिकांश को देखेंगे और देखेंगे कि उनका उपयोग कैसे किया जा सकता है।

<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>"> 

प्रत्येक प्रकार के फ़ंक्शन के लिए, एक या एक से अधिक विशेषताएँ हैं जो आपको उपयोग किए गए फ़ंक्शन के बारे में अतिरिक्त जानकारी निर्दिष्ट करने की अनुमति देती हैं। उदाहरण के लिए, एक रैखिक फ़ंक्शन में ढलान विशेषता होती है, जिसका उपयोग रैखिक फ़ंक्शन के ढलान को इंगित करने के लिए किया जाता है जिसका उपयोग उस घटक को बदलने के लिए किया जाएगा जिसके लिए इसे लागू किया जाता है।

आप एक ही समय में एक या अधिक घटक बदल सकते हैं । इसका मतलब है कि feComponentTransfer में एक ही समय में एक, दो, तीन या सभी घटक तत्व हो सकते हैं। आप प्रत्येक घटक तत्व के लिए विभिन्न कार्यों को लागू करते हुए, एक-दूसरे से स्वतंत्र रूप से चैनल भी बदल सकते हैं।

विभिन्न घटक तत्वों पर विभिन्न कार्यों का उपयोग करने की क्षमता का मतलब है कि आपके पास सबसे कम पिक्सेल स्तर पर ग्राफिक्स स्रोत के रंगों पर बहुत नियंत्रण है। उदाहरण के लिए, आप लाल और नीले चैनलों को दो नए रंगों के साथ मिलान करके बदल सकते हैं, और हरे रंग को अपरिवर्तित छोड़ सकते हैं या केवल इसकी तीव्रता बढ़ा सकते हैं। यह निम्न-स्तरीय घटक प्रबंधन का अर्थ है कि आप अपने ब्राउज़र में कोड की कुछ पंक्तियों का उपयोग करके फ़ोटोशॉप जैसी सुविधाओं को लागू कर सकते हैं। मैं आपके बारे में नहीं जानता, लेकिन मेरे (नौसिखिए) डिज़ाइनर को लगता है कि यह सुपर दिलचस्प है!

उदाहरण: किसी वस्तु की अस्पष्टता को कम करने के लिए एक अल्फा घटक का उपयोग करना

ग्राफिक्स स्रोत की अस्पष्टता को कम करने के लिए एक साधारण वास्तविक जीवन का उदाहरण feFuncA घटक तत्व का उपयोग है। इस श्रृंखला के पहले लेख में, हमने देखा कि कैसे एक रंग की मैट्रिक्स में अल्फा चैनल मान को बदलकर एक तत्व की अस्पष्टता को कम करने के लिए feColorMatrix का उपयोग किया जा सकता है। मैं व्यक्तिगत रूप से इस तरह के काम के लिए feComponentTransfer का उपयोग करना पसंद करता हूं।

निम्न फ़िल्टर को स्रोत पर लागू करने से इस स्रोत की अपारदर्शिता 0.5 हो जाती है:

 <filter id="redOp"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5"></feFuncA> </feComponentTransfer> </filter> 

हमने ऊपर उल्लेख किया है कि हमारे पास पांच अलग-अलग कार्य हैं जिन्हें हम RGBA घटकों को नियंत्रित करने के लिए उपयोग कर सकते हैं। टेबल फ़ंक्शन का प्रकार घटक के मूल्यों से मेल खाता है, जो हमारे उदाहरण में अल्फा चैनल है, टेबलवैल्यूस विशेषता द्वारा प्रदान किए गए मूल्यों की श्रृंखला के साथ।

तो इसका क्या मतलब है?

किसी तत्व का अल्फा चैनल आमतौर पर सीमा [0, 1] में होता है। तालिका फ़ंक्शन का उपयोग करना और दो मान प्रदान करना: 0 और 0.5, हम अनिवार्य रूप से ब्राउज़र को अल्फा रेंज [0, 1] को नई श्रेणी में मैप करने के लिए कहते हैं: [0, 0.5]। इस मामले में, अपारदर्शिता आधे से कम हो जाती है।

हम अगले लेख में टेबल फ़ंक्शन के अधिक विस्तृत उदाहरण पर विचार करेंगे। अब मैं फ़ंक्शन असतत के प्रकार पर प्रकाश डालना चाहता हूं। तो, आइए देखें कि यह कैसे काम करता है और हम इसके साथ क्या कर सकते हैं।

छवि के पोस्टराइजेशन प्रभाव: असतत फ़ंक्शन का उपयोग करके छवि में रंगों की संख्या को कम करना

असतत फ़ंक्शन का उपयोग किसी छवि या घटक में रंगों की संख्या को कम करने के लिए किया जाता है यदि केवल एक घटक का उपयोग किया जाता है। छवि में रंगों की संख्या को कम करने का मतलब है कि एक चिकनी रैखिक रंग परिवर्तन के बजाय, आपको तेज रंग संक्रमण दिखाई देगा जो छवि को धारियों या रंग के समूहों की तरह दिखता है, जो एक पोस्टर की तरह दिखने वाले प्रभाव की ओर जाता है।

Ris_3। दाईं ओर की छवि बाईं ओर की छवि की एक प्रति है, जिसमें 5 प्रति घटक में रंगों की संख्या को कम करने के लिए एक असतत फ़ंक्शन लागू किया गया है।

ऊपर दिए गए आंकड़े में, आप देख सकते हैं कि सुचारू बदलाव के बजाय, रंग नाटकीय रूप से बदलते हैं, रंग बार और क्लस्टर बनाते हैं, और छवि अधिक "पोस्टराइज़्ड" दिखती है।

व्यक्तिगत रूप से, असतत फ़ंक्शन सीएसएस में चरणों () सिंक्रनाइज़ेशन फ़ंक्शन की याद दिलाता है। एक लीनियर फ़ंक्शन की तुलना में, चरण-दर-चरण फ़ंक्शन उनके बीच रैखिक रूप से चलने के बजाय, एक मान से दूसरे में जाता है।

तालिका फ़ंक्शन की तरह, असतत फ़ंक्शन तालिका की विशेषताओं में निर्दिष्ट मानों की एक श्रृंखला लेता है। असतत फ़ंक्शन इन मानों का उपयोग करने के तरीके में तालिका से भिन्न होता है।

TableValues का उपयोग करके , आप ब्राउज़र को उन मानों की एक सीमित सूची प्रदान करते हैं जिनके साथ इसे रंग घटक को मैप करना होगा। और जब से आप मूल्यों की एक सीमित सूची प्रदान करते हैं, आपको रंगों की एक सीमित संख्या मिलती है, इस प्रकार रंग बार और क्लस्टर बनाते हैं जो अन्यथा रैखिक रंग संक्रमण होंगे।

यह फ़ंक्शन तालिका चरणों विशेषता में निर्दिष्ट फ़ंक्शन चरणों द्वारा निर्धारित किया जाता है, जो एन चरणों के चरण फ़ंक्शन की पहचान करने के लिए एन मानों की एक सूची प्रदान करता है। - एसवीजी फिल्टर विनिर्देश

आइए देखें कि सरल शब्दों में इसका क्या अर्थ है। मान लें कि हमारे पास निम्नलिखित कोड टुकड़ा है:

 <svg width="500" height="335" viewBox="0 0 500 335"> <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 .5 1" /> </feComponentTransfer> </filter> <image xlink:href="..."cwidth="100%" height="100%" x="0" y="0" filter="url(#posterize)"></image> </svg> 

उपरोक्त कोड के टुकड़े में, हम छवि स्रोत में लाल चैनल को बदलने के लिए एक असतत फ़ंक्शन का उपयोग करते हैं। हम 3 अलग-अलग मान प्रदान करते हैं, जिसके लिए ब्राउज़र को लाल मूल्यों से मेल खाना चाहिए। एसवीजी फ़िल्टर में, घटक मानों को सीमा में अंशों के रूप में दर्शाया जाता है [0, 1]। इसका मतलब यह है कि किसी भी पिक्सेल में लाल घटक का मान 0 (0% लाल / पूरी तरह से काला), 1 (100% लाल) या उनके बीच का कोई भी मूल्य (लाल रंग) हो सकता है। वही हरे, नीले और अल्फा चैनलों के लिए जाता है।

आपके द्वारा दर्ज किए गए किसी भी ( एन ) मूल्यों के लिए, ब्राउज़र एन रेंज बनाएगा। विशेष रूप से, यह [0, 1] को n श्रेणियों में विभाजित करेगा। फिर यह उन रंग मानों को प्रदर्शित करेगा जो इन मानों के भीतर n मानों के साथ हैं। इस तर्क को हमारे कोड स्निपेट पर लागू करें:

• ब्राउज़र टेबलवैल्यूस में तीन अलग-अलग लाल मूल्यों को देखता है ;
• यह लाल मूल्यों को श्रेणी [0, 1] में तीन समान भागों में विभाजित करता है। तो हमारे तीन रेंज इस प्रकार हैं:
  
  • [०, ०.३३]
  • [०.३३, ०.६६]
  • [०.६६, १]
• इसके अलावा, ब्राउज़र छवि में प्रत्येक पिक्सेल के लाल मूल्य की जांच करता है और यह निर्धारित करता है कि यह किस सीमा में स्थित है;
• फिर एक श्रेणी के सभी लाल मानों को इस सीमा से जुड़े नए मूल्य के साथ प्रदर्शित किया जाता है जो आपके द्वारा प्रदान किए गए हैं। प्रदर्शन इस प्रकार है:
  
  • रेंज में रंग [0, 0.33] 0 के रूप में प्रदर्शित किए जाते हैं;
  • रेंज में रंगों [0.33, 0.66] को 0.5 के रूप में प्रदर्शित किया जाता है;
  • रेंज में रंग [0.66, 1] को 1 के रूप में प्रदर्शित किया जाता है।

आप इस प्रक्रिया को कलर टोन को चालू या बंद करने के बारे में भी सोच सकते हैं। जब आप किसी रंग के लिए असतत मान प्रदान करते हैं, तो आप ब्राउज़र को बताते हैं कि केवल ये ही मूल्य शामिल होंगे, और यदि पिक्सेल में एक मान होता है, जो उनमें से एक के बराबर नहीं है, तो इसे बंद कर दिया जाना चाहिए और एक की अनुमति दी जानी चाहिए। इसलिए, उदाहरण के लिए, 0.8 का रंग मान बंद माना जाता है और इसे 1 से बदल दिया जाएगा (क्योंकि यह मान तीसरी श्रेणी में है)।

निम्नलिखित इस रंग प्रदर्शन का एक हाथ से तैयार चित्रण है, जिसे मैंने इसके बारे में सोचते समय चित्रित किया था। शायद आप काम आएंगे।

Ris_4। रंग रेंज करने के लिए रंग मूल्यों का मानचित्रण।

जब तक ब्राउज़र छवि के सभी पिक्सेल से गुजरता है, तब तक आप बड़ी संख्या में लाल मानों को उस छोटी संख्या के साथ बदल देंगे, जिसे आपने tableValues में चुना था, इस प्रकार तीव्र बदलाव के साथ चिकनी रंग परिवर्तन की जगह लेती है , और छवि ऐसी दिखती है मानो यह क्लस्टर से बना हो या रंग की धारियाँ।

निम्नलिखित लाल रंग के साथ एक छवि के लिए ऊपर कोड स्निपेट को लागू करने का एक डेमो है। एक छवि के पिक्सेल में लाल की संख्या को सीमित करने और उनमें से कुछ में लाल को शून्य करने से, छवि लाल रंग में सामान्य रूप से ध्यान देने योग्य कमी प्रदर्शित करती है, विशेष रूप से छवि के नीचे:

असतत मानों की संख्या बदलने और / या स्वयं मूल्यों को बदलने से समग्र परिणाम बदल जाएगा। आप छवि के कुछ काले क्षेत्रों से छुटकारा पाने के लिए रंग मान 0 नहीं देना चाह सकते हैं। उदाहरण के लिए, ऊपर के आकाश की छवि में, शायद, छवि के स्थिरीकरण के संस्करण में काले रंग का कोई समूह या धारियां नहीं होनी चाहिए, क्योंकि यह अभी भी आकाश की एक छवि है। ऐसा करने के लिए, आपको दो या तीन से अधिक रंगों की आवश्यकता होगी, अन्यथा छवि अपनी अधिकांश छवि खो देगी।

इस प्रभाव को बनाने के लिए, मैंने RGB रंगों की संख्या को पाँच तक सीमित कर दिया है, जिनकी शुरुआत 0.25 के निम्नतम मूल्य से होती है:

 <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncG type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncB type="discrete" tableValues=".25 .4 .5 .75 1" /> </feComponentTransfer> </filter> 

आप निम्नलिखित डेमो में प्रभाव के साथ खेल सकते हैं:

निष्कर्ष

मुझे उम्मीद है कि इस लेख ने feComponentTransfer को थोड़ा स्पष्ट करने में मदद की और आपको दिखाया कि शक्तिशाली पिक्सेल और घटक रंग नियंत्रण कैसे हो सकते हैं।

अगले लेख में, हम दो और शक्तिशाली प्रकारों पर विचार करेंगे feComponentTransfer हस्तांतरण फ़ंक्शन। हम देखेंगे कि आप दो-टोन फ़ोटोशॉप छवि के प्रभाव का अनुकरण कैसे कर सकते हैं, और आप feComponentTransfer का उपयोग करके किसी छवि की चमक, इसके विपरीत और रंग की तीव्रता को कैसे नियंत्रित कर सकते हैं। हमारे साथ रहो।