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

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

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

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

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

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

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

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

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

علبة ألوان Chromium

كيفية استخدام واجهة برمجة التطبيقات EyeDropper API

المتصفحات المتوافقة

التوافق مع المتصفح

  • 95
  • 95
  • x
  • x

المصدر

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

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

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 في مربّع المكونات. تعمل ميزة Glitch بشكل رائع لمشاركة عمليات إعادة الإنشاء بسرعة وسهولة.

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

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

روابط مفيدة

شكر وتقدير

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