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 le navigateur pour créer des sélecteurs de couleurs personnalisés.

Patrick Brosset
Patrick Brosset
Page d'accueil
Thomas Steiner

Qu'est-ce que l'API EyeDropper ?

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

Photoshop, par exemple, permet aux utilisateurs de prélever des couleurs sur le canevas afin de ne pas avoir à deviner une couleur et risquer de se tromper. PowerPoint dispose également d'un outil Pipette, utile pour définir la couleur de contour ou de remplissage d'une forme. Même les outils pour les développeurs Chromium disposent d'une pipette que vous pouvez utiliser lorsque vous modifiez des couleurs dans le panneau des styles CSS. Vous n'avez ainsi pas besoin de mémoriser ni de copier le code couleur depuis un autre emplacement.

Si vous créez une application créative avec des technologies Web, vous pouvez proposer une fonctionnalité similaire à vos utilisateurs. Toutefois, il est difficile, voire impossible, de le faire sur le Web, surtout si vous souhaitez échantillonner des couleurs à partir de l'écran entier de l'appareil (par exemple, à partir d'une autre application) et pas seulement à partir de l'onglet de navigateur actuel. Il n'existe pas d'outil Pipette fourni par le navigateur que les applications Web peuvent utiliser pour leurs propres besoins.

L'élément <input type="color"> s'en approche. Sur les navigateurs basés sur Chromium exécutés sur des appareils de bureau, il fournit une pipette utile dans le menu déroulant du sélecteur de couleurs. Toutefois, cela signifie que votre application devrait le personnaliser avec CSS et l'encapsuler dans un peu de JavaScript pour le rendre disponible aux autres parties de votre application. Cette option signifie également que les autres navigateurs n'auraient pas accès à la fonctionnalité.

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

Sélecteur de couleur Chromium.

Utiliser l'API EyeDropper

Prise en charge des navigateurs

Browser Support

  • Chrome: 95.
  • Edge: 95.
  • Firefox: not supported.
  • Safari: not supported.

Source

Détection des fonctionnalités et compatibilité des navigateurs

Avant d'utiliser l'API, assurez-vous qu'elle est disponible.

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

L'API EyeDropper est compatible avec les navigateurs Chromium tels qu'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 permet d'accéder à la couleur du pixel au format sRGBHex (#RRGGBB). La promesse est refusée si l'utilisateur quitte le mode Pipette en appuyant sur la touche 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.
}

Le code de l'application peut également annuler le mode Sélecteur de couleur. Cela peut être utile si l'état de l'application change de manière significative. Une boîte de dialogue pop-up peut s'afficher et nécessiter une saisie de l'utilisateur. Le mode Pipette doit être arrêté à ce moment-là.

Pour annuler le sélecteur de couleurs, 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();

Pour résumer, 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

Sur Windows ou Mac, ouvrez l'une des démos de la pipette à l'aide de Microsoft Edge ou de Google Chrome 95 ou version ultérieure.

Essayez par exemple la démonstration du jeu de couleurs. Appuyez sur le bouton Jouer et, dans un délai limité, essayez de sélectionner une couleur dans la liste en bas de l'écran qui correspond au carré coloré en haut.

Démo du jeu de couleurs.

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

Derrière cette API Web apparemment simple se cache un problème de confidentialité et de sécurité potentiellement dangereux. Que se passerait-il si un site Web malveillant pouvait commencer à voir les pixels de votre écran ?

Pour résoudre ce problème, la spécification de l'API exige les mesures suivantes :

  • Tout d'abord, l'API ne permet pas de démarrer le mode Sélecteur de couleur 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).
  • Deuxièmement, aucune information sur les pixels ne peut être récupérée sans l'intention de l'utilisateur. La promesse renvoyée par open() ne se résout en une valeur de couleur qu'en réponse à une action de l'utilisateur (clic sur un pixel). L'outil Pipette ne peut donc pas être utilisé en arrière-plan sans que l'utilisateur ne s'en aperçoive.
  • Pour aider les utilisateurs à remarquer facilement le mode Sélecteur de couleur, les navigateurs doivent le rendre visible. C'est pourquoi le curseur de la souris normal disparaît après un court délai et que l'interface utilisateur dédiée apparaît à la place. Il existe également un délai entre le moment où le mode Pipette démarre et celui où l'utilisateur peut sélectionner un pixel, afin de lui laisser le temps de voir la loupe.
  • Enfin, les utilisateurs peuvent annuler le mode Sélecteur de couleur à tout moment (en appuyant sur la touche esc).

Commentaires

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

Parlez-nous de la conception de l'API

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou bien manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter 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 trouvé un bug dans l'implémentation de Chromium ? L'implémentation est-elle différente de la spécification ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème et saisissez Blink>Forms>Color dans la zone Composants.

Soutenir l'API

Comptez-vous utiliser l'API EyeDropper ? Votre soutien public 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 pour nous indiquer où et comment vous l'utilisez.

Liens utiles

Remerciements

L'API EyeDropper a été spécifiée et implémentée par Ionel Popescu de l'équipe Microsoft Edge. Cet article a été examiné par Joe Medley.