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

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

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

מה זה EyeDropper API?

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

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

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

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

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

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

איך להשתמש ב-EearDropper API

תמיכת דפדפן

תמיכה בדפדפן

  • 95
  • 95
  • x
  • x

מקור

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

חשוב לוודא שה-API זמין לפני שמשתמשים בו.

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

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

שימוש ב-API

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

רוצה לנסות?

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

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

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

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

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

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

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

משוב

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

לספר לנו על עיצוב ה-API

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

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

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

הבעת תמיכה ב-API

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

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

אישורים

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