דף זה תורגם על ידי Cloud Translation API.

בחירת צבעים של כל פיקסל במסך באמצעות 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

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

מקור

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

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

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

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

שימוש ב-API

כדי להשתמש ב-API, יוצרים אובייקט EyeDropper ולאחר מכן קוראים לשיטה open() שלו.

const eyeDropper = new EyeDropper();

השיטה open() מחזירה הבטחה (promise) שמתקבלת אחרי שהמשתמש בוחר פיקסל במסך, והערך שמתקבל מספק גישה לצבע הפיקסל בפורמט 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;
  }
}

נסה בעצמך!

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

לדוגמה, אפשר לנסות את ההדגמה של משחק הצבעים. לוחצים על הלחצן 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 לתת עדיפות לתכונות, ומראה לספקי דפדפנים אחרים כמה חשובה התמיכה בהן. אפשר לשלוח ציוץ אל @ChromiumDev עם ה-hashtag #EyeDropper ולספר לנו איפה ואיך אתם משתמשים בו.

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

תודות

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