تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

اختيار ألوان أي وحدة بكسل على الشاشة باستخدام واجهة برمجة التطبيقات EdgeDropper

تتيح واجهة برمجة التطبيقات EyeDropper API للمؤلفين استخدام أداة اختيار ألوان يوفّرها المتصفّح في إنشاء أدوات اختيار ألوان مخصّصة.

Patrick Brosset

Thomas Steiner

ما هي واجهة برمجة التطبيقات EyeDropper API؟

تسمح العديد من التطبيقات الإبداعية للمستخدمين باختيار الألوان من أجزاء من نافذة التطبيق أو حتى من الشاشة بأكملها، وذلك عادةً باستخدام استعارة أداة اختيار الألوان.

على سبيل المثال، يتيح Photoshop للمستخدمين اختبار ألوان من اللوحة حتى لا يضطروا إلى تخمين لون والمخاطرة باختيار لون غير صحيح. يحتوي PowerPoint أيضًا على أداة اختيار الألوان، وهي مفيدة عند ضبط المخطط أو لون التعبئة لشكل معيّن. تتضمّن "أدوات مطوّري البرامج في Chromium" أيضًا أداة قطرة ماء يمكنك استخدامها عند تعديل الألوان في لوحة أنماط CSS حتى لا تضطر إلى تذكُّر رمز اللون أو نسخه من مكان آخر.

إذا كنت بصدد إنشاء تطبيق إبداعي باستخدام تكنولوجيات الويب، ننصحك بتوفير ميزة مشابهة لمستخدميك. ومع ذلك، من الصعب إجراء ذلك على الويب، إن أمكن على الإطلاق، خاصةً إذا كنت تريد تحليل عيّنات من الألوان من شاشة الجهاز بالكامل (على سبيل المثال، من تطبيق مختلف) وليس فقط من علامة التبويب الحالية للمتصفّح. لا تتوفّر أداة قطارة يوفّرها المتصفّح يمكن لتطبيقات الويب استخدامها لتلبية احتياجاتها.

أصبح عنصر <input type="color"> قريبًا. في المتصفّحات المستندة إلى Chromium التي تعمل على أجهزة الكمبيوتر المكتبي، يوفّر التطبيق أداة تنقيط مفيدة في القائمة المنسدلة لأداة اختيار الألوان. مع ذلك، يعني استخدام هذا الخيار أنّه يجب أن يخصِّصه تطبيقك باستخدام لغة CSS، مع إحاطته بلغة JavaScript لإتاحته في أجزاء أخرى من التطبيق. وعند استخدام هذا الخيار، لن تتمكّن المتصفحات الأخرى من الوصول إلى هذه الميزة.

تُسدّد EyeDropper API هذه الفجوة من خلال توفير طريقة لتحليل عيّنات الألوان من الشاشة.

علبة ألوان Chromium

كيفية استخدام 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;
  }
}

جرّب الآن

باستخدام Microsoft Edge أو Google Chrome 95 أو الإصدارات الأحدث على نظام التشغيل Windows أو Mac، افتح أحد العروض التوضيحية لتطبيق EyeDropper.

يمكنك مثلاً تجربة الإصدار التجريبي من لعبة الألوان. اضغط على الزر تشغيل وحاول خلال فترة زمنية محدودة الحصول على عيّنة من لون من القائمة في أسفل الشاشة يتطابق مع المربّع الملوّن في أعلى الشاشة.

إصدار تجريبي من لعبة ملونة

اعتبارات الخصوصية والأمان

إنّ واجهة برمجة التطبيقات هذه التي تبدو بسيطة تتضمن مشكلة خصوصية وأمان قد تكون ضارة. ماذا لو بدأ موقع إلكتروني ضار في رؤية وحدات البكسل من شاشتك؟

لحلّ هذه المشكلة، تتطلّب مواصفات واجهة برمجة التطبيقات اتّخاذ التدابير التالية:

أولاً، لا تسمح واجهة برمجة التطبيقات ببدء وضع "قطارة الألوان" بدون نية المستخدم. لا يمكن استدعاء الطريقة open() إلا استجابةً لإجراء من جانب المستخدم (مثل النقر على زر).
ثانيًا، لا يمكن استرداد أي معلومات من وحدة البكسل بدون نية المستخدِم مرة أخرى. لا يتم تحويل الوعد الذي يعرضه open() إلى قيمة لون إلا استجابةً لفعل المستخدِم (النقر على بكسل). لذا، لا يمكن استخدام القطارة في الخلفية بدون أن يلاحظها المستخدم.
ولمساعدة المستخدمين في ملاحظة وضع القطارة بسهولة، يُطلب من المتصفحات توضيح الوضع. لهذا السبب يختفي مؤشر الماوس العادي بعد تأخير قصير وتظهر واجهة المستخدم المخصّصة بدلاً منه. هناك أيضًا تأخير بين بدء وضع قطارة الحبر ووقت التمكّن من اختيار مستخدم وحدة بكسل لضمان حصول المستخدم على الوقت الكافي للاطّلاع على المكبّر.
أخيرًا، يمكن للمستخدمين إلغاء وضع قطارة الحبر في أي وقت (من خلال الضغط على مفتاح esc ).

ملاحظات

يرغب فريق Chromium في معرفة رأيك بشأن تجاربك في استخدام EyeDropper API.

أخبِرنا عن تصميم واجهة برمجة التطبيقات

هل هناك مشكلة في واجهة برمجة التطبيقات لا تعمل على النحو المتوقّع؟ هل هناك طُرق أو سمات مفقودة تحتاجها لتنفيذ فكرتك؟ هل لديك سؤال أو تعليق حول ملف أمان الحساب؟ يمكنك الإبلاغ عن مشكلة في المواصفات على مستودع GitHub الخاص بواجهة برمجة التطبيقات، أو إضافة ملاحظاتك إلى مشكلة حالية.

الإبلاغ عن مشكلة في التنفيذ

هل عثرت على خطأ في عملية تنفيذ Chromium؟ أم أن التنفيذ يختلف عن المواصفات؟ يمكنك الإبلاغ عن خلل على الرابط new.crbug.com. احرص على تضمين أكبر قدر ممكن من التفاصيل، وتعليمات بسيطة لإعادة إنتاج الخلل، وأدخِل Blink>Forms>Color في مربّع المكوّنات. تعمل ميزة الخطأ بشكلٍ رائع لمشاركة النسخ المُعاد إنتاجها بسرعة وسهولة.

إظهار الدعم لواجهة برمجة التطبيقات

هل تخطّط لاستخدام EyeDropper API؟ يساعد دعمك العلني فريق Chromium في تحديد أولويات الميزات ويُظهر لمورّدي المتصفّحات الأخرى مدى أهمية توفيرها. أرسِل تغريدة إلى حساب ‎@ChromiumDev باستخدام الهاشتاغ #EyeDropper وأخبِرنا بمكان استخدامك للميزة وطريقة استخدامك لها.

روابط مفيدة

الشكر والتقدير

تم تحديد واجهة برمجة التطبيقات EyeDropper API وتنفيذها من قِبل Ionel Popescu من فريق Microsoft Edge. راجع Joe Medley هذه المشاركة.