इस पेज का अनुवाद Cloud Translation API से किया गया है.

EyeDropper API के साथ स्क्रीन पर किसी भी पिक्सल का रंग चुनना

EyeDropper API की मदद से, लेखक कस्टम कलर पिकर बनाने के लिए, ब्राउज़र से मिलने वाले आईड्रॉपर का इस्तेमाल कर सकते हैं.

Patrick Brosset

Thomas Steiner

EyeDropper API क्या है?

कई क्रिएटिव ऐप्लिकेशन, उपयोगकर्ताओं को ऐप्लिकेशन विंडो के कुछ हिस्सों या पूरी स्क्रीन से रंग चुनने की सुविधा देते हैं. आम तौर पर, इसके लिए आईड्रॉपर टूल का इस्तेमाल किया जाता है.

उदाहरण के लिए, Photoshop में उपयोगकर्ता कैनवस से रंगों का सैंपल ले सकते हैं, ताकि उन्हें रंग का अनुमान न लगाना पड़े और रंग गलत न हो जाए. PowerPoint में भी आईड्रॉपर टूल होता है. यह किसी आकार की आउटलाइन या भरने के लिए रंग सेट करते समय काम आता है. Chromium DevTools में भी एक आईड्रॉपर टूल होता है. इसका इस्तेमाल, सीएसएस स्टाइल पैनल में रंगों में बदलाव करते समय किया जा सकता है. इससे आपको रंग कोड को याद रखने या कहीं से कॉपी करने की ज़रूरत नहीं पड़ती.

अगर वेब टेक्नोलॉजी का इस्तेमाल करके कोई क्रिएटिव ऐप्लिकेशन बनाया जा रहा है, तो हो सकता है कि आप अपने उपयोगकर्ताओं को मिलती-जुलती सुविधा देना चाहें. हालांकि, वेब पर ऐसा करना मुश्किल है. अगर ऐसा किया जा सकता है, तो खास तौर पर, अगर आपको सिर्फ़ मौजूदा ब्राउज़र टैब से नहीं, बल्कि पूरे डिवाइस की स्क्रीन (उदाहरण के लिए, किसी दूसरे ऐप्लिकेशन से) के रंगों का सैंपल लेना है. ब्राउज़र से मिलने वाला कोई ऐसा ऐड-ऑन टूल नहीं है जिसका इस्तेमाल वेब ऐप्लिकेशन अपनी ज़रूरतों के हिसाब से कर सकें.

<input type="color"> एलिमेंट पास आता है. डेस्कटॉप डिवाइस पर चल रहे Chromium पर आधारित ब्राउज़र पर, यह कलर पिकर ड्रॉप-डाउन में एक मददगार आईड्रॉपर उपलब्ध कराता है. हालांकि, इसका इस्तेमाल करने का मतलब है कि आपके ऐप्लिकेशन को इसे सीएसएस की मदद से अपनी पसंद के मुताबिक बनाना होगा. साथ ही, इसे अपने ऐप्लिकेशन के दूसरे हिस्सों में उपलब्ध कराने के लिए, इसे कुछ JavaScript में रैप करना होगा. इस विकल्प का इस्तेमाल करने का मतलब है कि दूसरे ब्राउज़र भी इस सुविधा को ऐक्सेस नहीं कर पाएंगे.

EyeDropper API, स्क्रीन से कलर का सैंपल लेकर इस कमी को दूर करता है.

Chromium का कलर पिकर.

EyeDropper API का इस्तेमाल करने का तरीका

ब्राउज़र समर्थन

ब्राउज़र सहायता

सोर्स

सुविधा की पहचान और ब्राउज़र के साथ काम करने की सुविधा

एपीआई का इस्तेमाल करने से पहले, पक्का करें कि वह उपलब्ध हो.

if ('EyeDropper' in window) {
  // The API is available!
}

EyeDropper API, Edge या Chrome जैसे Chromium पर आधारित ब्राउज़र के वर्शन 95 से काम करता है.

एपीआई का इस्तेमाल करना

एपीआई का इस्तेमाल करने के लिए, EyeDropper ऑब्जेक्ट बनाएं और फिर उसका open() तरीका कॉल करें.

const eyeDropper = new EyeDropper();

open() तरीका एक प्रॉमिस दिखाता है. यह प्रॉमिस तब रिज़ॉल्व होता है, जब उपयोगकर्ता स्क्रीन पर कोई पिक्सल चुनता है. रिज़ॉल्व की गई वैल्यू, sRGBHex फ़ॉर्मैट (#RRGGBB) में पिक्सल के रंग का ऐक्सेस देती है. अगर उपयोगकर्ता esc बटन दबाकर, ऐयरड्रॉपर मोड छोड़ देता है, तो प्रॉमिस अस्वीकार कर दिया जाता है.

try {
  const result = await eyeDropper.open();
  // The user selected a pixel, here is its color:
  const colorHexValue = result.sRGBHex;
} catch (err) {
  // The user escaped the eyedropper mode.
}

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

ऐयरड्रॉपर को रद्द करने के लिए, AbortController ऑब्जेक्ट के सिग्नल का इस्तेमाल किया जा सकता है और उसे open() तरीके में पास किया जा सकता है.

const abortController = new AbortController();

try {
  const result = await eyeDropper.open({signal: abortController.signal});
  // ...
} catch (err) {
  // ...
}

// And then later, when the eyedropper mode needs to be stopped:
abortController.abort();

सभी चीज़ों को एक साथ जोड़कर, यहां आपको फिर से इस्तेमाल किया जा सकने वाला असाइनिक फ़ंक्शन मिल सकता है:

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

इसे आज़माएं!

Windows या Mac पर, Microsoft Edge या Google Chrome 95 या उसके बाद के वर्शन का इस्तेमाल करके, EyeDropper के किसी एक डेमो को खोलें.

उदाहरण के लिए, रंगों के गेम का डेमो आज़माएं. चलाएं बटन दबाएं और सीमित समय में, सूची में सबसे नीचे दिए गए रंग को, ऊपर दिए गए रंगीन वर्ग से मेल खाने वाले रंग का नमूना बनाने की कोशिश करें.

Color गेम का डेमो.

निजता और सुरक्षा से जुड़ी बातें

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

इस समस्या को हल करने के लिए, एपीआई की खास बातों को ध्यान में रखते हुए ये कदम उठाने होंगे:

पहला, एपीआई, उपयोगकर्ता के इंटेंट के बिना, ऐयरड्रॉपर मोड को शुरू नहीं होने देता. open() तरीके को सिर्फ़ उपयोगकर्ता की कार्रवाई (जैसे, बटन पर होने वाला क्लिक) के जवाब में कॉल किया जा सकता है.
दूसरा, उपयोगकर्ता की सहमति के बिना, पिक्सल की कोई जानकारी फिर से नहीं ली जा सकती. open() से मिलने वाला प्रॉमिस, उपयोगकर्ता की कार्रवाई (पिक्सल पर क्लिक करना) के जवाब में सिर्फ़ रंग की वैल्यू पर लागू होता है. इसलिए, उपयोगकर्ता को बताए बिना, बैकग्राउंड में आइड्रोपपर का इस्तेमाल नहीं किया जा सकता.
उपयोगकर्ताओं को आसानी से ऐयरड्रॉपर मोड का पता चल सके, इसके लिए ब्राउज़र को इस मोड को साफ़ तौर पर दिखाना होगा. इस वजह से, कुछ देर बाद सामान्य माउस कर्सर हट जाता है और इसके बजाय, खास यूज़र इंटरफ़ेस दिखता है. ऐयरड्रॉपर मोड शुरू होने और उपयोगकर्ता के किसी पिक्सल को चुनने के बीच भी देरी होती है. इससे यह पक्का किया जा सकता है कि उपयोगकर्ता को मैग्नीफ़ाइंग ग्लास देखने का समय मिला है.
आखिर में, उपयोगकर्ता esc बटन दबाकर, ऐयरड्रॉपर मोड को किसी भी समय बंद कर सकते हैं.

सुझाव/राय दें या शिकायत करें

Chromium की टीम को EyeDropper API के साथ आपके अनुभवों के बारे में जानना है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? क्या आपके आइडिया को लागू करने के लिए, कोई तरीका या प्रॉपर्टी मौजूद नहीं है? क्या आपका सुरक्षा मॉडल के बारे में कोई सवाल या टिप्पणी है? एपीआई के GitHub रेपो पर, स्पेसिफ़िकेशन से जुड़ी समस्या दर्ज करें या किसी मौजूदा समस्या के बारे में अपनी राय दें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chromium को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, खास जानकारी से अलग है? new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. इसके बाद, Components बॉक्स में Blink>Forms>Color डालें. Glitch, तुरंत और आसानी से समस्या की जानकारी शेयर करने के लिए बहुत अच्छा है.

एपीआई के लिए सहायता दिखाना

क्या आपको EyeDropper API का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता करने से, Chromium टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है. #EyeDropper हैशटैग का इस्तेमाल करके, @ChromiumDev को ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

मदद के लिए लिंक

धन्यवाद

EyeDropper API को Microsoft Edge टीम के Ionel Popescu ने तय किया और लागू किया था. इस पोस्ट की समीक्षा जो मेडली ने की है.