यह वेब ऐप किसी भी छवि को रेट्रो बुखार के सपने में बदल देता है-फोटोशॉप की आवश्यकता नहीं है

हमारे मेंPrevious ट्यूटोरियल, हमने अपने आवेदन को संदर्भों और पैलेटों के साथ काम करने के लिए सिखाया. अब, रंग और दृश्य प्रभावों के लिए अधिक विकल्प जोड़ने का समय है।

हम कुछ नए उपकरण पेश करेंगे जो अधिक लचीला छवि संभालने की अनुमति देते हैं. इसके अलावा, हम एक नया रंग मॉडल, HSV का पता लगाने जा रहे हैं, जो RGB और LAB से अलग रंगों के साथ काम करता है. यह मॉडल रंग, संतृप्ति और हल्कापन जैसे विशेषताओं को संभालना आसान बनाता है, जो इसे छवियों में रंगों को समायोजित करने के लिए विशेष रूप से उपयोगी बनाता है. यह नवाचार रचनात्मक संभावनाओं और प्रयोग के लिए अवसरों को खोल देगा।

पूरी परियोजना कोड उपलब्ध हैइस लिंक.

Adjusting the Number of Colors in the Extracted Palette

हमने पहले से ही देखा है कि कैसे एक पैलेट को सीमित करना एक छवि की उपस्थिति को बदल सकता है।

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

ऐप में अब एक स्लाइडर है जो आपको छवि से निकाले गए रंगों की संख्या चुनने की अनुमति देता है (10 से 20 तक)।

<div style={{ marginBottom: 12 }}>
  <label>Number of Colors</label>
  <input
    type="range"
    min="10"
    max="20"
    value={colorCount}
    onChange={(e) => setColorCount(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>

हम So Sasaki की शानदार तस्वीर के साथ प्रयोग करेंगेटोक्यो के लिएयह रंगों और रंगों की एक विस्तृत श्रृंखला की पेशकश करता है, जिससे यह हमारी खोज के लिए एकदम सही विषय है।

नीचे आप तुलना कर सकते हैं कि विभिन्न आकारों की एक पैलेट के साथ छवि कैसी दिखती है।

Filter Intensity Slider

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

बस वांछित फिल्टर तीव्रता का चयन करें और "फिल्टर लागू करें" पर क्लिक करें।

<div style={{ marginBottom: 16 }}>
  <label style={{ display: "block", marginBottom: 6 }}>Filter Intensity</label>
  <input
    type="range"
    min="0"
    max="100"
    value={intensity}
    onChange={(e) => setIntensity(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>

How does it work?

जब तीव्रता 100% पर सेट की जाती है, तो चयनित पैलेट से रंगों का उपयोग करके छवि पूरी तरह से परिवर्तित की जाती है. तीव्रता मूल्य जितना कम होता है, तो पैलेट की छवि पर कम प्रभाव पड़ता है, जिससे आप मूल रंगों के अधिक को बनाए रख सकते हैं।

HSV Color Model

HSV (Hue, Saturation, Value) सबसे लोकप्रिय रंग मॉडल में से एक है, जिसे अक्सर अपने रंग, संतृप्ति और चमक के संदर्भ में रंग का प्रतिनिधित्व करने के लिए उपयोग किया जाता है।

के
• रंग: यह मूल रंग (जैसे लाल, हरे, नीले, आदि) का प्रतिनिधित्व करता है, जो 0 से 360 डिग्री तक मापा जाता है।
के
• संतृप्ति: यह रंग की तीव्रता को इंगित करता है. संतृप्ति रंग में ग्रे की मात्रा से प्रभावित होती है: 100% एक पूरी तरह से संतृप्त रंग है, और 0% ग्रे है।
के
• मूल्य (प्रकाशन): यह दर्शाता है कि रंग कितना उज्ज्वल है. 0% का मूल्य काला देता है, जबकि 100% रंग का सबसे उज्ज्वल संस्करण है।
के

Differences from RGB and LAB:

के
• आरजीबी के विपरीत, जहां रंग लाल, हरे और नीले की तीव्रता के आधार पर संयुक्त होते हैं, HSV मानव दृश्य धारणा पर आधारित होता है।
के
• LAB की तुलना में, जो विभिन्न रोशनी स्थितियों में सटीक रंग प्रतिनिधित्व के लिए एक अधिक जटिल गणितीय मॉडल का उपयोग करता है, HSV अधिक सहज और उपयोगकर्ता के अनुकूल है।
के

RGB को HSV में परिवर्तित करने के लिए नमूना कोड:

function rgbToHsv(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h = 0, s = 0, v = max;

  if (delta !== 0) {
    s = delta / max;
    if (r === max) {
      h = (g - b) / delta;
    } else if (g === max) {
      h = 2 + (b - r) / delta;
    } else {
      h = 4 + (r - g) / delta;
    }
    h *= 60;
    if (h < 0) h += 360;
  }

  return [h, s * 100, v * 100];
}

नीचे एक ही पैलेट में छवियों के उदाहरण हैं, लेकिन विभिन्न रंग मॉडल में।

Contrast Slider

विपरीत एक छवि में सबसे हल्के और सबसे अंधेरे बिंदुओं के बीच अंतर को संदर्भित करता है. विपरीत को समायोजित करना आपको इस अंतर को बढ़ाने या कम करने की अनुमति देता है. विपरीत जितना अधिक है, उतना ही हल्के और अंधेरे क्षेत्र स्पष्ट होंगे.

How does contrast adjustment work?

जब विपरीतता बढ़ जाती है, तो छवि के अंधेरे क्षेत्र और भी अंधेरे हो जाते हैं, और हल्के क्षेत्र और भी उज्ज्वल हो जाते हैं।

विपरीत कोड को बदलने के लिए उदाहरण:

const applyContrast = (r, g, b, contrast) => {
  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
  r = contrastFactor * (r - 128) + 128;
  g = contrastFactor * (g - 128) + 128;
  b = contrastFactor * (b - 128) + 128;
  return [r, g, b];
};

Algorithm Description:

विपरीत एल्गोरिथ्म एक कारक का उपयोग करता है जो वर्तमान विपरीत मूल्य पर निर्भर करता है. इस कारक को प्रत्येक रंग घटक (लाल, हरे, और नीले) पर लागू किया जाता है, जो विपरीत स्तर के आधार पर उनकी चमक को समायोजित करता है.

Noise Slider

उन लोगों के लिए जो थोड़ा मजा करना चाहते हैं, हमने एक शोर स्लाइडर जोड़ा है। एक छवि में शोर जोड़ना एक विंटेज फोटो प्रभाव बनाने में मदद करता है या छवि को अधिक "जीवित" महसूस करता है।

How does the noise work?

शोर स्लाइडर आपको छवि में प्रत्येक पिक्सेल के रंग पर लागू किए गए यादृच्छिक परिवर्तनों की मात्रा को नियंत्रित करने की अनुमति देता है. शोर मूल्य जितना अधिक है, छवि पर लागू किए गए यादृच्छिक परिवर्तनों की मात्रा जितनी अधिक है.

जब एक छवि में शोर जोड़ा जाता है, तो प्रत्येक पिक्सेल के आरजीबी मूल्यों में छोटे, यादृच्छिक बदलाव पेश किए जाते हैं, जिसके परिणामस्वरूप एक अनाज प्रभाव होता है।

const applyNoise = (r, g, b, noise) => {
  r += Math.random() * noise - noise / 2;
  g += Math.random() * noise - noise / 2;
  b += Math.random() * noise - noise / 2;
  return [r, g, b];
};

Algorithm Description:

एक यादृच्छिक मूल्य निर्दिष्ट सीमा के भीतर प्रत्येक पिक्सेल को जोड़ा जाता है। यह यादृच्छिक रंग परिवर्तनों का प्रभाव पैदा करता है, जिससे छवि को एक शोर या अनाज की उपस्थिति मिलती है। हमारे मामले में, हम बस विकृतियों का अनुकरण कर रहे हैं, जिनके पास वास्तविक फिल्म अनाज या शोर से कोई संबंध नहीं है।सोनी एरिसन W810) एक ही सिद्धांत पर काम करते हैं।

शोर की मात्रा को नियंत्रित करके, उपयोगकर्ता विभिन्न तीव्रता स्तरों के साथ प्रयोग कर सकते हैं ताकि विभिन्न रचनात्मक प्रभावों को प्राप्त किया जा सके या एक फोटोग्राफी में अपूर्णताओं को अनुकरण किया जा सके।

और निश्चित रूप से, हमने सभी फ़िल्टर को मिटाने और मूल छवि पर लौटने के लिए रीसेट सेटिंग्स बटन जोड़ा है।

हमारे लेखों के दौरान, हमने रंग सुधार के बुनियादों में डुबकी दी है और इसे लागू करने के लिए विभिन्न उपकरणों और तकनीकों का पता लगाया है. हमने रंग पैलेटों को निकालने और समायोजित करने के तरीके, विपरीत, संतृप्ति और शोर के प्रभाव, और विभिन्न रंग मॉडल - आरजीबी, लैब, और HSV के साथ काम करने के तरीके की जांच की है.

रंग सुधार चित्र प्रसंस्करण का एक महत्वपूर्ण पहलू है, जो हमें दृश्य धारणा को बढ़ाने, कुछ तत्वों को उजागर करने और रंगों के बीच सामंजस्य प्राप्त करने की अनुमति देता है. हमने दिखाया है कि पैलेट में रंगों की संख्या को समायोजित करना या विपरीत सेटिंग्स को संशोधित करना कैसे पूरी तरह से एक छवि को बदल सकता है, इसे अधिक अभिव्यक्तिजनक और गतिशील बना सकता है.

यह ध्यान रखना महत्वपूर्ण है कि रंग और विपरीत समायोजन न केवल एक छवि की उपस्थिति को प्रभावित करते हैं बल्कि यह भी प्रभावित करते हैं कि इसे कैसे देखा जाता है।