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

আইড্রপার এপিআই লেখকদের কাস্টম কালার পিকার তৈরিতে ব্রাউজার-সরবরাহকৃত আইড্রপার ব্যবহার করতে সক্ষম করে।

প্যাট্রিক ব্রসেট
Patrick Brosset
Homepage
টমাস স্টেইনার

আইড্রপার এপিআই কী?

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

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

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

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

আইড্রপার এপিআই স্ক্রিন থেকে রঙের নমুনা সংগ্রহের একটি উপায় প্রদান করে এই শূন্যস্থান পূরণ করে।

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

আইড্রপার এপিআই কীভাবে ব্যবহার করবেন

ব্রাউজার সাপোর্ট

Browser Support

  • ক্রোম: ৯৫।
  • প্রান্ত: ৯৫।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: সমর্থিত নয়।

Source

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

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

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

৯৫ সংস্করণ থেকে Edge বা Chrome এর মতো Chromium-ভিত্তিক ব্রাউজারগুলিতে EyeDropper API সমর্থিত।

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;
  }
}

চেষ্টা করে দেখুন!

উইন্ডোজ বা ম্যাকে মাইক্রোসফট এজ বা গুগল ক্রোম ৯৫ বা তার পরবর্তী সংস্করণ ব্যবহার করে, আইড্রপার ডেমোগুলির একটি খুলুন।

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

রঙিন খেলার ডেমো।

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

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

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

  • প্রথমত, API আসলে ব্যবহারকারীর ইচ্ছা ছাড়া আইড্রপার মোড শুরু করতে দেয় না। open() পদ্ধতিটি শুধুমাত্র ব্যবহারকারীর ক্রিয়াকলাপের (যেমন একটি বোতাম ক্লিকের) প্রতিক্রিয়ায় কল করা যেতে পারে।
  • Second, no pixel information can be retrieved without user intent again. The promise returned by open() only resolves to a color value in response to a user action (clicking on a pixel). So the eyedropper cannot be used in the background without the user noticing it.
  • ব্যবহারকারীদের আইড্রপার মোডটি সহজেই লক্ষ্য করার জন্য, ব্রাউজারগুলিকে মোডটি স্পষ্ট করে তুলতে হবে। এই কারণেই কিছুক্ষণ বিলম্বের পরে স্বাভাবিক মাউস কার্সার অদৃশ্য হয়ে যায় এবং তার পরিবর্তে ডেডিকেটেড ইউজার ইন্টারফেস প্রদর্শিত হয়। আইড্রপার মোড শুরু হওয়ার পর থেকে ব্যবহারকারী যখন একটি পিক্সেল নির্বাচন করতে পারে তখন ব্যবহারকারী ম্যাগনিফাইং গ্লাসটি দেখার সময় পেয়েছে তা নিশ্চিত করার মধ্যেও একটি বিলম্ব থাকে।
  • অবশেষে, ব্যবহারকারীরা যেকোনো সময় ( esc কী টিপে) আইড্রপার মোড বাতিল করতে পারবেন।

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

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

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

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

বাস্তবায়নে কোনও সমস্যার কথা জানান

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

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

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

সহায়ক লিঙ্ক

স্বীকৃতি

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