בחירת צבעים של כל פיקסל במסך באמצעות EarDropper API

‫EyeDropper API מאפשר למפתחים להשתמש בטפטפת שסופקה על ידי הדפדפן כדי ליצור כלי לבחירת צבעים בהתאמה אישית.

Patrick Brosset

Thomas Steiner

מה זה EyeDropper API?

הרבה אפליקציות יצירתיות מאפשרות למשתמשים לבחור צבעים מחלקים של חלון האפליקציה או אפילו מכל המסך, בדרך כלל באמצעות מטאפורה של טפטפת.

לדוגמה, ב-Photoshop המשתמשים יכולים לבחור צבעים מהבד הדיגיטלי, כך שהם לא צריכים לנחש צבע ולהסתכן בבחירה לא נכונה. ב-PowerPoint יש גם כלי טפטפת, שימושי כשמגדירים את קו המתאר או את צבע המילוי של צורה. גם בכלי הפיתוח ל-Chromium יש טפטפת שאפשר להשתמש בה כשעורכים צבעים בחלונית הסגנונות של CSS, כך שלא צריך לזכור או להעתיק את קוד הצבע ממקום אחר.

אם אתם מפתחים אפליקציה יצירתית באמצעות טכנולוגיות אינטרנט, יכול להיות שתרצו לספק למשתמשים שלכם תכונה דומה. עם זאת, קשה לעשות את זה באינטרנט, אם בכלל אפשר, במיוחד אם רוצים לבחור צבעים מכל המסך של המכשיר (לדוגמה, מאפליקציה אחרת) ולא רק מהכרטיסייה הנוכחית בדפדפן. אין כלי טפטפת שמוצע על ידי הדפדפן ואפליקציות אינטרנט יכולות להשתמש בו לצרכים שלהן.

האלמנט <input type="color"> דומה. בדפדפנים שמבוססים על Chromium שפועלים במחשבים, הוא מספק כלי שימושי של טפטפת בתפריט הנפתח של בוחר הצבעים. עם זאת, אם תבחרו באפשרות הזו, תצטרכו להתאים אישית את האפליקציה באמצעות CSS ולעטוף אותה בקוד JavaScript כדי שהיא תהיה זמינה לחלקים אחרים באפליקציה. בנוסף, אם תבחרו באפשרות הזו, דפדפנים אחרים לא יוכלו לגשת לתכונה.

‫EyeDropper API ממלא את הפער הזה ומספק דרך לדגום צבעים מהמסך.

בוחר הצבעים של Chromium.

איך משתמשים ב-EyeDropper API

תמיכה בדפדפנים

Browser Support

Source

זיהוי תכונות ותמיכה בדפדפן

קודם כל, צריך לוודא שה-API זמין לפני שמשתמשים בו.

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

ה-API של EyeDropper נתמך בדפדפנים מבוססי Chromium כמו Edge או Chrome מגרסה 95.

שימוש ב-API

כדי להשתמש ב-API, יוצרים אובייקט EyeDropper ואז קוראים ל-method ‏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;
  }
}

רוצה לנסות?

במחשב Windows או Mac, פותחים אחת מהדוגמאות של EyeDropper באמצעות Microsoft Edge או Google Chrome בגרסה 95 ואילך.

לדוגמה, אפשר לנסות את ההדגמה של משחק הצבעים. לוחצים על הלחצן הפעלה ומנסים לבחור צבע מהרשימה שבתחתית המסך שמתאים לריבוע הצבעוני שמופיע בחלק העליון של המסך, תוך זמן מוגבל.

הדגמה של משחק הצבעים.

שיקולי פרטיות ואבטחה

מאחורי ממשק ה-API הפשוט לכאורה הזה מסתתרת בעיה פוטנציאלית שקשורה לפרטיות ולאבטחה. מה יקרה אם אתר זדוני יוכל להתחיל לראות פיקסלים מהמסך שלכם?

כדי לפתור את הבעיה הזו, במפרט ה-API נדרשים האמצעים הבאים:

קודם כל, ה-API לא מאפשר להתחיל את מצב הטפטפת בלי כוונת המשתמש. אפשר לקרוא לשיטה open() רק בתגובה לפעולה של משתמש (כמו לחיצה על כפתור).
שנית, אי אפשר לאחזר מידע על פיקסלים בלי כוונת המשתמש. ההבטחה שמוחזרת על ידי open() מומרת לערך צבע רק בתגובה לפעולת משתמש (לחיצה על פיקסל). לכן אי אפשר להשתמש בטפטפת ברקע בלי שהמשתמש יבחין בכך.
כדי לעזור למשתמשים להבחין בקלות במצב של טפטפת, הדפדפנים צריכים להציג את המצב בצורה ברורה. זו הסיבה לכך שסמן העכבר הרגיל נעלם אחרי השהיה קצרה ובמקומו מופיע ממשק המשתמש הייעודי. יש גם השהיה בין הרגע שבו מתחיל מצב הטפטפת לבין הרגע שבו המשתמש יכול לבחור פיקסל, כדי לוודא שהמשתמש הספיק לראות את זכוכית המגדלת.
לבסוף, המשתמשים יכולים לבטל את מצב הטפטפת בכל שלב (בלחיצה על המקש esc).

משוב

הצוות של Chromium רוצה לשמוע על החוויות שלכם עם EyeDropper API.

מהו עיצוב ה-API?

האם יש משהו ב-API שלא פועל כמו שציפית? או שיש שיטות או מאפיינים חסרים שצריך להטמיע כדי לממש את הרעיון? יש לך שאלה או הערה לגבי מודל האבטחה? אפשר להגיש בעיה במפרט במאגר GitHub של ה-API, או להוסיף את המחשבות שלכם לבעיה קיימת.

דיווח על בעיה בהטמעה

מצאתם באג בהטמעה של Chromium? או שההטמעה שונה מהמפרט? מדווחים על הבאג בכתובת new.crbug.com. חשוב לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור הבאג ומזינים Blink>Forms>Color בתיבה Components.

תמיכה ב-API

האם בכוונתך להשתמש ב-EyeDropper API? התמיכה הציבורית שלכם עוזרת לצוות Chromium לתת עדיפות לתכונות, ומראה לספקי דפדפנים אחרים עד כמה חשוב לתמוך בהן. אפשר לשלוח ציוץ אל @ChromiumDev עם ההאשטאג #EyeDropper ולספר לנו איפה ואיך אתם משתמשים בו.

קישורים שימושיים

תודות

ממשק ה-API של EyeDropper הוגדר והוטמע על ידי Ionel Popescu מצוות Microsoft Edge. הפוסט הזה נבדק על ידי Joe Medley.

בחירת צבעים של כל פיקסל במסך באמצעות EarDropper API קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.