דף זה תורגם על ידי 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;
  }
}

נסה בעצמך!

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

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

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

תודות

הכלי EyeDropper API סומן והוטמע על ידי Ionel Popescu מצוות Microsoft Edge. הפוסט הזה נבדק על ידי ג'ו מדלי.