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

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

Patrick Brosset
Thomas Steiner

ما هي EyeDropper API؟

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

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

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

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

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

علبة ألوان Chromium

كيفية استخدام EyeDropper API

دعم المتصفح

Browser Support

  • Chrome: 95.
  • Edge: 95.
  • Firefox: not supported.
  • Safari: not supported.

Source

رصد الميزات والتوافق مع المتصفّحات

في البداية، تأكَّد من توفّر واجهة برمجة التطبيقات قبل استخدامها.

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

تتوفّر واجهة برمجة التطبيقات EyeDropper على المتصفّحات المستندة إلى 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.
}

يمكن لرمز التطبيق أيضًا إلغاء وضع أداة اختيار الألوان. قد يكون ذلك مفيدًا إذا تغيّرت حالة التطبيق بشكل كبير. قد يظهر مربّع حوار منبثق يطلب من المستخدم إدخال معلومات. يجب إيقاف وضع &quot;أداة اختيار الألوان&quot; عند هذه النقطة.

لإلغاء أداة اختيار الألوان، يمكنك استخدام إشارة من كائن 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. راجع هذه المشاركة جو ميدلي.