انتخاب رنگ هر پیکسل روی صفحه با استفاده از EyeDropper API

رابط برنامه‌نویسی کاربردی EyeDropper به نویسندگان این امکان را می‌دهد که از یک قطره‌چکان ارائه شده توسط مرورگر در ساخت انتخابگرهای رنگ سفارشی استفاده کنند.

پاتریک بروسه
Patrick Brosset
Homepage
توماس اشتاینر

رابط برنامه‌نویسی کاربردی (API) قطره‌چکان چیست؟

بسیاری از برنامه‌های خلاقانه به کاربران اجازه می‌دهند رنگ‌ها را از بخش‌هایی از پنجره برنامه یا حتی از کل صفحه انتخاب کنند، که معمولاً با استفاده از استعاره قطره‌چکان انجام می‌شود.

برای مثال، فتوشاپ به کاربران اجازه می‌دهد رنگ‌ها را از بوم نمونه‌برداری کنند تا مجبور نباشند رنگ را حدس بزنند و ریسک اشتباه کردن را بپذیرند. پاورپوینت نیز یک ابزار قطره‌چکان دارد که هنگام تنظیم رنگ خطوط بیرونی یا پر کردن یک شکل مفید است. حتی Chromium DevTools نیز یک قطره‌چکان دارد که می‌توانید هنگام ویرایش رنگ‌ها در پنل استایل‌های CSS از آن استفاده کنید، بنابراین لازم نیست کد رنگ را از جای دیگری به خاطر بسپارید یا کپی کنید.

اگر در حال ساخت یک اپلیکیشن خلاقانه با فناوری‌های وب هستید، شاید بخواهید ویژگی مشابهی را در اختیار کاربران خود قرار دهید. با این حال، انجام این کار در وب، اگر اصلاً امکان‌پذیر باشد، دشوار است، به خصوص اگر بخواهید رنگ‌ها را از کل صفحه نمایش دستگاه (مثلاً از یک اپلیکیشن دیگر) و نه فقط از تب فعلی مرورگر، نمونه‌برداری کنید. ابزار قطره‌چکان ارائه شده توسط مرورگر وجود ندارد که اپلیکیشن‌های وب بتوانند برای نیازهای خود از آن استفاده کنند.

عنصر <input type="color"> تقریباً به این هدف نزدیک است. در مرورگرهای مبتنی بر Chromium که روی دستگاه‌های دسکتاپ اجرا می‌شوند، یک قطره‌چکان مفید در منوی کشویی انتخاب رنگ ارائه می‌دهد. با این حال، استفاده از این به این معنی است که برنامه شما باید آن را با CSS سفارشی کند و آن را در کمی جاوا اسکریپت قرار دهد تا در دسترس سایر بخش‌های برنامه شما قرار گیرد. استفاده از این گزینه همچنین به این معنی است که مرورگرهای دیگر به این ویژگی دسترسی نخواهند داشت.

رابط برنامه‌نویسی کاربردی EyeDropper با ارائه روشی برای نمونه‌برداری از رنگ‌های صفحه نمایش، این خلا را پر می‌کند.

انتخابگر رنگ کروم.

نحوه استفاده از API قطره‌چکان

پشتیبانی مرورگر

Browser Support

  • کروم: ۹۵.
  • لبه: ۹۵.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: پشتیبانی نمی‌شود.

Source

تشخیص ویژگی و پشتیبانی مرورگر

ابتدا، قبل از استفاده از API، مطمئن شوید که در دسترس است.

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

رابط برنامه‌نویسی کاربردی EyeDropper از نسخه ۹۵ به بعد در مرورگرهای مبتنی بر کرومیوم مانند اج یا کروم پشتیبانی می‌شود.

با استفاده از API

برای استفاده از API، یک شیء EyeDropper ایجاد کنید و سپس متد open() آن را فراخوانی کنید.

const eyeDropper = new EyeDropper();

متد open() یک promise را برمی‌گرداند که پس از انتخاب یک پیکسل روی صفحه توسط کاربر، resolve می‌شود و مقدار resolve شده، دسترسی به رنگ پیکسل را با فرمت sRGBHex ( #RRGGBB ) فراهم می‌کند. اگر کاربر با فشردن کلید esc از حالت قطره‌چکان خارج شود، promise رد می‌شود.

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

امتحانش کن!

با استفاده از مایکروسافت اج یا گوگل کروم ۹۵ یا بالاتر، در ویندوز یا مک، یکی از دموهای EyeDropper را باز کنید.

برای مثال، نسخه آزمایشی بازی رنگ را امتحان کنید. دکمه پخش را بزنید و در مدت زمان محدودی، سعی کنید رنگی را از لیست پایین که با مربع رنگی بالا مطابقت دارد، انتخاب کنید.

نسخه آزمایشی بازی رنگی.

ملاحظات حریم خصوصی و امنیتی

پشت این API وب به ظاهر ساده، یک نگرانی بالقوه مضر در مورد حریم خصوصی و امنیت پنهان شده است. چه می‌شود اگر یک وب‌سایت مخرب بتواند پیکسل‌های صفحه نمایش شما را ببیند؟

برای رفع این نگرانی، مشخصات API اقدامات زیر را الزامی می‌کند:

  • اول اینکه، API در واقع اجازه نمی‌دهد حالت قطره‌چکان بدون قصد کاربر شروع شود. متد open() فقط می‌تواند در پاسخ به یک عمل کاربر (مانند کلیک روی دکمه) فراخوانی شود.
  • دوم، هیچ اطلاعات پیکسلی بدون قصد کاربر قابل بازیابی نیست. قولی که توسط open() برگردانده می‌شود، فقط در پاسخ به یک عمل کاربر (کلیک روی یک پیکسل) به یک مقدار رنگ تبدیل می‌شود. بنابراین قطره‌چکان نمی‌تواند در پس‌زمینه بدون اینکه کاربر متوجه آن شود، استفاده شود.
  • برای اینکه کاربران به راحتی متوجه حالت قطره‌چکان شوند، مرورگرها باید این حالت را به وضوح نمایش دهند. به همین دلیل است که نشانگر ماوس معمولی پس از یک تأخیر کوتاه ناپدید می‌شود و رابط کاربری اختصاصی به جای آن ظاهر می‌شود. همچنین بین زمانی که حالت قطره‌چکان شروع می‌شود و زمانی که کاربر می‌تواند یک پیکسل را انتخاب کند، تأخیری وجود دارد تا مطمئن شویم که کاربر زمان کافی برای دیدن ذره‌بین داشته است.
  • در نهایت، کاربران می‌توانند حالت قطره‌چکان را در هر زمانی (با فشار دادن کلید esc ) لغو کنند.

بازخورد

تیم کرومیوم می‌خواهد از تجربیات شما در استفاده از رابط برنامه‌نویسی کاربردی EyeDropper مطلع شود.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد API وجود دارد که آنطور که انتظار داشتید کار نمی‌کند؟ یا متدها یا ویژگی‌هایی وجود ندارد که برای پیاده‌سازی ایده خود به آنها نیاز دارید؟ در مورد مدل امنیتی سؤال یا نظری دارید؟ یک مشکل مربوط به مشخصات را در مخزن GitHub API ثبت کنید، یا نظرات خود را به یک مشکل موجود اضافه کنید.

گزارش مشکل در پیاده‌سازی

آیا در پیاده‌سازی کرومیوم اشکالی پیدا کردید؟ یا پیاده‌سازی با مشخصات متفاوت است؟ یک اشکال را در new.crbug.com ثبت کنید. حتماً تا حد امکان جزئیات، دستورالعمل‌های ساده برای بازتولید را ذکر کنید و در کادر Components Blink>Forms>Color را وارد کنید.

نمایش پشتیبانی از API

آیا قصد دارید از API EyeDropper استفاده کنید؟ حمایت عمومی شما به تیم کرومیوم کمک می‌کند تا ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که پشتیبانی از آنها چقدر حیاتی است. با استفاده از هشتگ #EyeDropper یک توییت به @ChromiumDev ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می‌کنید.

لینک‌های مفید

تقدیرنامه‌ها

رابط برنامه‌نویسی کاربردی EyeDropper توسط ایونل پوپسکو از تیم مایکروسافت اج مشخص و پیاده‌سازی شده است. این پست توسط جو مدلی بررسی شده است.