এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

EyeDropper API দিয়ে স্ক্রিনে যেকোনো পিক্সেলের রং বাছাই করা

EyeDropper API লেখকদের কাস্টম কালার পিকার নির্মাণে ব্রাউজার দ্বারা সরবরাহ করা আইড্রপার ব্যবহার করতে সক্ষম করে।

Patrick Brosset

Thomas Steiner

EyeDropper API কি?

অনেক সৃজনশীল অ্যাপ্লিকেশন ব্যবহারকারীদের অ্যাপ উইন্ডোর কিছু অংশ থেকে বা এমনকি পুরো স্ক্রীন থেকে রঙ বাছাই করার অনুমতি দেয়, সাধারণত একটি আইড্রপার রূপক ব্যবহার করে।

ফটোশপ, উদাহরণস্বরূপ, ব্যবহারকারীদের ক্যানভাস থেকে রঙের নমুনা নিতে দেয় যাতে তাদের কোনও রঙ অনুমান করতে না হয় এবং এটি ভুল হওয়ার ঝুঁকি থাকে। পাওয়ারপয়েন্টের একটি আইড্রপার টুলও রয়েছে, যা আউটলাইন সেট করার সময় বা আকৃতির রঙ পূরণ করার সময় দরকারী। এমনকি Chromium DevTools-এ একটি আইড্রপার রয়েছে যা আপনি CSS শৈলী প্যানেলে রঙ সম্পাদনা করার সময় ব্যবহার করতে পারেন যাতে আপনাকে অন্য কোথাও থেকে রঙের কোড মনে রাখতে বা অনুলিপি করতে না হয়।

আপনি যদি ওয়েব প্রযুক্তির সাহায্যে একটি সৃজনশীল অ্যাপ্লিকেশন তৈরি করেন, তাহলে আপনি আপনার ব্যবহারকারীদের জন্য একটি অনুরূপ বৈশিষ্ট্য প্রদান করতে চাইতে পারেন। যাইহোক, ওয়েবে এটি করা কঠিন, যদি সম্ভব হয়, বিশেষ করে যদি আপনি পুরো ডিভাইসের স্ক্রীন থেকে রঙের নমুনা নিতে চান (উদাহরণস্বরূপ, একটি ভিন্ন অ্যাপ্লিকেশন থেকে) এবং শুধুমাত্র বর্তমান ব্রাউজার ট্যাব থেকে নয়। ব্রাউজার দ্বারা সরবরাহ করা আইড্রপার টুল নেই যা ওয়েব অ্যাপগুলি তাদের নিজস্ব প্রয়োজনে ব্যবহার করতে পারে৷

<input type="color"> উপাদানটি কাছাকাছি আসে। ডেস্কটপ ডিভাইসে চলমান Chromium-ভিত্তিক ব্রাউজারগুলিতে, এটি রঙ চয়নকারী ড্রপ ডাউনে একটি সহায়ক আইড্রপার প্রদান করে। যাইহোক, এটি ব্যবহার করার অর্থ হল আপনার অ্যাপটিকে এটিকে CSS এর সাথে কাস্টমাইজ করতে হবে এবং এটিকে আপনার অ্যাপের অন্যান্য অংশে উপলব্ধ করার জন্য এটিকে কিছুটা জাভাস্ক্রিপ্টে মুড়ে দিতে হবে। এই বিকল্পের সাথে যাওয়ার অর্থ হল অন্যান্য ব্রাউজারগুলির বৈশিষ্ট্যটিতে অ্যাক্সেস থাকবে না।

EyeDropper API পর্দা থেকে নমুনা রঙের একটি উপায় প্রদান করে এই ফাঁক পূরণ করে।

ক্রোমিয়াম রঙ চয়নকারী।

কিভাবে EyeDropper API ব্যবহার করবেন

ব্রাউজার সমর্থন

উৎস

বৈশিষ্ট্য সনাক্তকরণ এবং ব্রাউজার সমর্থন

প্রথমত, নিশ্চিত করুন যে APIটি ব্যবহার করার আগে উপলব্ধ আছে।

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

EyeDropper API সংস্করণ 95 অনুযায়ী এজ বা ক্রোমের মতো ক্রোমিয়াম-ভিত্তিক ব্রাউজারে সমর্থিত।

API ব্যবহার করে

API ব্যবহার করতে, একটি 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 ডেমোগুলির একটি খুলুন।

উদাহরণস্বরূপ কালার গেম ডেমো চেষ্টা করুন। প্লে বোতাম টিপুন এবং সীমিত সময়ের মধ্যে, নীচের তালিকা থেকে একটি রঙের নমুনা দেওয়ার চেষ্টা করুন যা উপরের রঙিন বর্গক্ষেত্রের সাথে মেলে।

রঙ খেলা ডেমো.

গোপনীয়তা এবং নিরাপত্তা বিবেচনা

এই আপাতদৃষ্টিতে সহজ ওয়েব API এর পিছনে একটি সম্ভাব্য ক্ষতিকারক গোপনীয়তা এবং নিরাপত্তা উদ্বেগ লুকিয়ে আছে। যদি একটি দূষিত ওয়েবসাইট আপনার স্ক্রীন থেকে পিক্সেল দেখা শুরু করতে পারে?

এই উদ্বেগ মোকাবেলা করার জন্য, API স্পেসিফিকেশন নিম্নলিখিত ব্যবস্থাগুলির প্রয়োজন:

প্রথমত, API আসলে ব্যবহারকারীর উদ্দেশ্য ছাড়াই আইড্রপার মোড শুরু হতে দেয় না। open() পদ্ধতিটি শুধুমাত্র ব্যবহারকারীর ক্রিয়াকলাপের প্রতিক্রিয়া হিসাবে কল করা যেতে পারে (যেমন একটি বোতাম ক্লিক)।
দ্বিতীয়ত, কোনো পিক্সেল তথ্য আবার ব্যবহারকারীর উদ্দেশ্য ছাড়া পুনরুদ্ধার করা যাবে না। open() দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতিটি শুধুমাত্র ব্যবহারকারীর ক্রিয়াকলাপের প্রতিক্রিয়া হিসাবে একটি রঙের মানকে সমাধান করে (একটি পিক্সেলে ক্লিক করে)। তাই ব্যবহারকারীর খেয়াল না করে ব্যাকগ্রাউন্ডে আইড্রপার ব্যবহার করা যাবে না।
ব্যবহারকারীদের সহজে আইড্রপার মোড লক্ষ্য করতে সাহায্য করার জন্য, ব্রাউজারগুলিকে মোডটি স্পষ্ট করতে হবে। এই কারণেই স্বাভাবিক মাউস কার্সারটি অল্প বিলম্বের পরে অদৃশ্য হয়ে যায় এবং এর পরিবর্তে ডেডিকেটেড ইউজার ইন্টারফেস উপস্থিত হয়। আইড্রপার মোড কখন শুরু হয় এবং ব্যবহারকারী যখন ম্যাগনিফাইং গ্লাসটি দেখতে সময় পেয়েছেন তা নিশ্চিত করতে ব্যবহারকারী একটি পিক্সেল নির্বাচন করতে পারেন তার মধ্যেও একটি বিলম্ব রয়েছে।
অবশেষে, ব্যবহারকারীরা যেকোনো সময় ( esc কী টিপে) আইড্রপার মোড বাতিল করতে সক্ষম।

প্রতিক্রিয়া

Chromium টিম EyeDropper API এর সাথে আপনার অভিজ্ঞতার কথা শুনতে চায়।

API ডিজাইন সম্পর্কে আমাদের বলুন

API সম্পর্কে এমন কিছু আছে যা আপনার প্রত্যাশিত মত কাজ করে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য আপনার প্রয়োজনীয় পদ্ধতি বা বৈশিষ্ট্যগুলি অনুপস্থিত আছে? নিরাপত্তা মডেল সম্পর্কে একটি প্রশ্ন বা মন্তব্য আছে? API-এর GitHub রেপোতে একটি বিশেষ সমস্যা ফাইল করুন, অথবা একটি বিদ্যমান সমস্যায় আপনার চিন্তাভাবনা যোগ করুন।

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

আপনি কি Chromium এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন? new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিশদ অন্তর্ভুক্ত করতে ভুলবেন না, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী, এবং উপাদান বাক্সে Blink>Forms>Color লিখুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

API এর জন্য সমর্থন দেখান

আপনি EyeDropper API ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chromium টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷ #EyeDropper হ্যাশট্যাগ ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

সহায়ক লিঙ্ক

স্বীকৃতি

আইড্রপার এপিআই মাইক্রোসফ্ট এজ টিমের আইওনেল পোপেস্কু দ্বারা নির্দিষ্ট এবং প্রয়োগ করা হয়েছিল। এই পোস্টটি জো মেডলি দ্বারা পর্যালোচনা করা হয়েছে।