Choisir les couleurs de n'importe quel pixel à l'écran avec l'API EyeDropper

L'API EyeDropper permet aux auteurs d'utiliser une pipette fournie par un navigateur pour créer des sélecteurs de couleur personnalisés.

Patrick Brosset

Thomas Steiner

Qu'est-ce que l'API EyeDropper ?

De nombreuses applications créatives permettent aux utilisateurs de choisir des couleurs dans certaines parties de la fenêtre de l'application ou même sur tout l'écran, généralement à l'aide d'une métaphore de la pipette.

Photoshop, par exemple, permet aux utilisateurs d'échantillonner les couleurs du canevas afin de ne pas avoir à deviner une couleur et de risquer de se tromper. PowerPoint dispose également d'un outil de pipette, utile pour définir la couleur de contour ou de remplissage d'une forme. Même les outils pour les développeurs Chromium proposent une pipette que vous pouvez utiliser lorsque vous modifiez les couleurs dans le panneau "Styles CSS" (Styles CSS). Vous n'avez donc pas besoin de vous souvenir ni de copier le code de couleur ailleurs.

Si vous concevez une application de création avec des technologies Web, vous souhaiterez peut-être fournir une fonctionnalité similaire à vos utilisateurs. Toutefois, cette opération sur le Web est difficile, dans la mesure du possible, en particulier si vous souhaitez échantillonner les couleurs de l'intégralité de l'écran de l'appareil (par exemple, à partir d'une autre application) et pas seulement de l'onglet actuel du navigateur. Il n'existe pas d'outil de pipette fourni par un navigateur que les applications Web puissent utiliser pour leurs propres besoins.

L'élément <input type="color"> se rapproche. Sur les navigateurs basés sur Chromium et exécutés sur des ordinateurs, elle fournit une pipette utile dans le menu déroulant du sélecteur de couleur. Toutefois, cela signifie que votre application doit la personnaliser avec du code CSS et l'encapsuler dans un peu de JavaScript pour la rendre disponible à d'autres parties de votre application. Si vous choisissez cette option, les autres navigateurs n'auraient pas accès à la fonctionnalité.

L'API EyeDropper comble cette lacune en fournissant un moyen d'échantillonner les couleurs à l'écran.

Utiliser l'API EyeDropper

Prise en charge des navigateurs

Détection de fonctionnalités et compatibilité avec les navigateurs

Assurez-vous d'abord que l'API est disponible avant de l'utiliser.

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

L'API EyeDropper est compatible avec les navigateurs basés sur Chromium, comme Edge ou Chrome, à partir de la version 95.

Utiliser l'API

Pour utiliser l'API, créez un objet EyeDropper, puis appelez sa méthode open().

const eyeDropper = new EyeDropper();

La méthode open() renvoie une promesse qui se résout une fois que l'utilisateur a sélectionné un pixel à l'écran. La valeur résolue donne accès à la couleur du pixel au format sRGBHex (#RRGGBB). La promesse est rejetée si l'utilisateur quitte le mode pipette en appuyant sur la touche Échap.

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.
}

Le code de l'application peut également annuler le mode pipette. Cela peut s'avérer utile si l'état de l'application change de manière significative. Peut-être qu'une boîte de dialogue pop-up s'affiche et nécessite la saisie de l'utilisateur. Le mode Pipette doit être arrêté à ce stade.

Pour annuler la pipette, vous pouvez utiliser le signal d'un objet AbortController et le transmettre à la méthode 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();

En résumant tous ces éléments, vous trouverez ci-dessous une fonction asynchrone réutilisable:

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

Essayer

À l'aide de Microsoft Edge, de Google Chrome 95 ou d'une version ultérieure, sous Windows ou Mac, ouvrez l'une des démonstrations EyeDropper.

Essayez la démo du jeu de couleur par exemple. Appuyez sur le bouton Play (Lecture) et, dans un laps de temps limité, essayez d'échantillonner une couleur de la liste située en bas qui correspond au carré coloré en haut.

Points à prendre en compte concernant la confidentialité et la sécurité

Derrière cette API Web apparemment simple cache un problème de confidentialité et de sécurité potentiellement préjudiciable. Et si un site Web malveillant pouvait voir des pixels sur votre écran ?

Pour répondre à ce problème, la spécification d'API requiert les mesures suivantes:

• Tout d'abord, l'API ne permet pas le démarrage du mode pipette sans l'intention de l'utilisateur. La méthode open() ne peut être appelée qu'en réponse à une action de l'utilisateur (comme un clic sur un bouton).
• Ensuite, aucune information sur les pixels ne peut être récupérée sans intent de l'utilisateur. La promesse renvoyée par open() ne se résout qu'en réponse à une action de l'utilisateur (clic sur un pixel). La pipette ne peut donc pas être utilisée en arrière-plan sans que l'utilisateur s'en aperçoive.
• Pour que les utilisateurs remarquent facilement le mode pipette, les navigateurs doivent l'indiquer clairement. C'est pourquoi le curseur normal de la souris disparaît après un court délai et l'interface utilisateur dédiée apparaît à la place. Il existe également un délai entre le début du mode pipette et le moment où l'utilisateur peut sélectionner un pixel pour s'assurer qu'il a eu le temps de voir la loupe.
• Enfin, les utilisateurs peuvent annuler le mode pipette à tout moment (en appuyant sur la touche Échap).

Commentaires

L'équipe Chromium souhaite connaître votre avis sur votre expérience avec l'API EyeDropper.

Décrivez-nous la conception de l'API.

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ? Signalez un problème de spécification dans le dépôt GitHub de l'API ou ajoutez vos commentaires à un problème existant.

Signaler un problème d'implémentation

Avez-vous détecté un bug dans l'implémentation de Chromium ? Ou l'implémentation est-elle différente des spécifications ? Signalez un bug à l'adresse new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que des instructions simples pour reproduire le bug, puis saisissez Blink>Forms>Color dans la zone Composants. Glitch est idéal pour partager des reproductions simples et rapides.

Afficher la compatibilité avec l'API

Comptez-vous utiliser l'API EyeDropper ? Votre assistance publique aide l'équipe Chromium à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge. Envoyez un tweet à @ChromiumDev avec le hashtag #EyeDropper, et indiquez-nous où et comment vous l'utilisez.

Liens utiles

• Explication publique
• Ébauche de spécifications
• Démonstration de l'API EyeDropper | Source de la démonstration de l'API EyeDropper
• Bug de suivi Chromium
• Entrée ChromeStatus.com
• Composant Blink: Blink>Forms>Color
• Examen de la balise
• Demande de position WebKit
• Demande de positionnement Mozilla
• Intention d'expédition

Remerciements

L'API EyeDropper a été spécifiée et mise en œuvre par Ionel Popescu, de l'équipe Microsoft Edge. Cet article a été examiné par Joe Medley.