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

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

پاتریک بروست
Patrick Brosset
X GitHub
توماس اشتاینر

EyeDropper API چیست؟

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

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

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

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

EyeDropper API این شکاف را با ارائه راهی برای نمونه برداری از رنگ ها از صفحه نمایش پر می کند.

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

نحوه استفاده از EyeDropper API

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

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

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

منبع

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

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

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

EyeDropper API در مرورگرهای مبتنی بر Chromium مانند Edge یا Chrome در نسخه 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;
  }
}

آن را امتحان کنید!

با استفاده از Microsoft Edge یا Google Chrome 95 یا جدیدتر، در Windows یا Mac، یکی از دموهای EyeDropper را باز کنید.

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

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

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

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

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

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

بازخورد

تیم Chromium می‌خواهد در مورد تجربیات شما با EyeDropper API بشنود.

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

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

گزارش مشکل در اجرا

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

پشتیبانی از API را نشان دهید

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

لینک های مفید

قدردانی ها

EyeDropper API توسط Ionel Popescu از تیم Microsoft Edge مشخص و پیاده سازی شده است. این پست توسط جو مدلی بازبینی شده است.