EyeDropper API की मदद से लेखक, पसंद के मुताबिक कलर पिकर बनाने के लिए ब्राउज़र के साथ काम करने वाले आईड्रॉपर का इस्तेमाल कर सकते हैं.
EyeDropper API क्या है?
कई क्रिएटिव ऐप्लिकेशन, उपयोगकर्ताओं को ऐप्लिकेशन की विंडो के हिस्सों या यहां तक कि पूरी स्क्रीन से भी रंग चुनने की सुविधा देते हैं. आम तौर पर, इसके लिए कोई आईड्रॉपर इस्तेमाल किया जाता है.
उदाहरण के लिए, Photoshop की मदद से उपयोगकर्ता कैनवस से रंगों को सैंपल कर सकते हैं, ताकि उन्हें रंग पहचानने में परेशानी न हो और उसे गलत होने का खतरा भी न हो. PowerPoint में एक आईड्रॉपर टूल भी है, जो किसी आकार की आउटलाइन या फ़िल रंग सेट करते समय उपयोगी होता है. यहां तक कि Chromium DevTools में एक आईड्रॉपर भी है जिसका इस्तेमाल सीएसएस स्टाइल पैनल में रंगों में बदलाव करते समय किया जा सकता है. इससे आपको किसी और जगह से कलर कोड को याद रखने या कॉपी करने की ज़रूरत नहीं पड़ेगी.
अगर आपको वेब टेक्नोलॉजी की मदद से कोई क्रिएटिव ऐप्लिकेशन बनाना है, तो हो सकता है कि आप अपने उपयोगकर्ताओं को भी ऐसी ही सुविधा देना चाहें. हालांकि, अगर मुमकिन हो, तो वेब पर ऐसा करना मुश्किल होता है. खास तौर पर, जब आपको सिर्फ़ मौजूदा ब्राउज़र टैब से ही नहीं, बल्कि पूरे डिवाइस की स्क्रीन (उदाहरण के लिए, किसी दूसरे ऐप्लिकेशन से) में मौजूद रंगों को सैंपल करना हो. ब्राउज़र के साथ ऐसा कोई आईड्रॉपर टूल नहीं है जिसका इस्तेमाल वेब ऐप्लिकेशन अपनी ज़रूरतों के लिए कर सकें.
<input type="color"> एलिमेंट करीब आ जाता है. डेस्कटॉप डिवाइसों पर चल रहे Chromium-आधारित ब्राउज़र पर, यह कलर पिकर ड्रॉप डाउन में मददगार आईड्रॉपर उपलब्ध कराता है. हालांकि, इसका इस्तेमाल करने का मतलब है कि आपको ऐप्लिकेशन को सीएसएस की मदद से, पसंद के मुताबिक बनाना होगा. साथ ही, JavaScript की मदद से उस जानकारी को जोड़ना होगा, ताकि वह आपके ऐप्लिकेशन के दूसरे हिस्सों में उपलब्ध हो सके.
इस विकल्प का इस्तेमाल करने का यह भी मतलब है कि दूसरे ब्राउज़र इस सुविधा को ऐक्सेस नहीं कर पाएंगे.
EyeDropper API की मदद से, स्क्रीन पर मौजूद रंगों को सैंपल के तौर पर इस्तेमाल किया जा सकता है.
EyeDropper API को इस्तेमाल करने का तरीका
ब्राउज़र समर्थन
सुविधा की पहचान और ब्राउज़र सहायता
एपीआई का इस्तेमाल करने से पहले, यह पक्का कर लें कि वह उपलब्ध है.
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 रेपो पर खास समस्या दर्ज करें या किसी मौजूदा समस्या पर अपने विचार जोड़ें.
लागू करने से जुड़ी समस्या की शिकायत करें
क्या आपको Chromium को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने की प्रक्रिया खास जानकारी से अलग है?
new.crbug.com पर गड़बड़ी की शिकायत करें. जितना हो सके ज़्यादा से ज़्यादा जानकारी शामिल करें, सामग्री को फिर से बनाने के आसान निर्देश दें और घटक बॉक्स में Blink>Forms>Color डालें.
Glitch का इस्तेमाल करके, तुरंत और आसान तरीकों को शेयर किया जा सकता है.
एपीआई के साथ काम करता है
क्या आपको EyeDropper API का इस्तेमाल करना है? आपकी सार्वजनिक सहायता से, Chromium की टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे दूसरे ब्राउज़र वेंडर को पता चलता है कि उनकी मदद करना कितना ज़रूरी है. हैशटैग #EyeDropper का इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें
और हमें बताएं कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.
मददगार लिंक
- सार्वजनिक तौर पर जानकारी देने वाला वीडियो
- खास जानकारी वाला ड्राफ़्ट
- EyeDropper API डेमो | EyeDropper API डेमो सोर्स
- Chromium ट्रैकिंग की गड़बड़ी
- ChromeStatus.com एंट्री
- ब्लिंक कॉम्पोनेंट:
Blink>Forms>Color - टैग की समीक्षा
- WebKit के पोज़िशन का अनुरोध करना
- Mozilla पोज़िशन का अनुरोध
- शिप करने का इरादा
स्वीकार हैं
EyeDropper API को Microsoft Edge टीम की ओर से, Ionel Popescu ने तय और लागू किया है. इस पोस्ट की समीक्षा जो मेडली ने की है.