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

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

Patrick Brosset

Thomas Steiner

EyeDropper API क्या है?

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

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

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

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

EyeDropper API, स्क्रीन से रंगों के सैंपल लेने का तरीका उपलब्ध कराता है. इससे इस कमी को पूरा किया जा सकता है.

Chromium का कलर पिकर.

EyeDropper API का इस्तेमाल कैसे करें

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

Browser Support

Source

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

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

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

EyeDropper API, Chromium पर आधारित ब्राउज़र जैसे कि Edge या Chrome के वर्शन 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 के डेमो में से कोई एक डेमो खोलें.

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

रंगों के गेम का डेमो.

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

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

इस समस्या को हल करने के लिए, एपीआई की खास जानकारी में इन बातों का ध्यान रखना ज़रूरी है:

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

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

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

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

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

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

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

एपीआई के लिए अपना सपोर्ट दिखाना

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

काम के लिंक

Acknowledgements

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