Cette page a été traduite par l'API Cloud Translation.

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

Thomas Steiner

Qu'est-ce que l'API EyeDropper ?

De nombreuses applications de création permettent aux utilisateurs de choisir des couleurs dans des parties de la fenêtre de l'application ou même sur l'ensemble de l'écran, généralement à l'aide d'une métaphore d'un 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 propose également un outil Pipette, qui est utile pour définir la couleur du contour ou du 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 donc pas besoin de mémoriser ni de copier le code de couleur ailleurs.

Si vous concevez une application créative à l'aide de technologies Web, vous souhaiterez peut-être proposer une fonctionnalité similaire à vos utilisateurs. Toutefois, cette opération sur le Web est difficile, si 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 à partir de l'onglet actuel du navigateur. Il n'existe pas d'outil de pipette fourni par le navigateur que les applications Web puissent utiliser pour leurs propres besoins.

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

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

Sélecteur de couleur Chromium.

Utiliser l'API EyeDropper

Prise en charge des navigateurs

Navigateurs pris en charge

Source

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

Commencez par vous assurer 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 Chromium, tels qu'Edge ou Chrome, à partir de la version 95.

Utilisation de 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 rejeté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 pipette. Cela peut s'avérer 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 l'entrée de l'utilisateur. Le mode pipette doit être arrêté à ce stade.

Pour annuler l'outil de 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 combinant 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

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

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

Démo du jeu Color.

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 y remédier, la spécification de l'API exige les mesures suivantes:

Tout d'abord, l'API ne permet pas de démarrer le mode pipette sans l'intent 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 résout qu'une valeur de couleur en réponse à une action de l'utilisateur (cliquer 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 aider les utilisateurs à remarquer facilement le mode Pipette, les navigateurs sont requis pour le rendre évident. C'est pourquoi le pointeur de la souris normal disparaît après un court délai et que l'interface utilisateur dédiée s'affiche à la place. Un délai est également accordé 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 esc).

Commentaires

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

Parlez-nous de la conception de l'API

L'API ne fonctionne-t-elle pas comme prévu ? Ou 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 ? Ou 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 et des instructions simples pour reproduire le bug, et saisissez Blink>Forms>Color dans la zone Composants. Glitch est idéal pour partager des répétitions rapidement et facilement.

Apportez votre soutien à l'API

Prévoyez-vous d'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 en utilisant le hashtag #EyeDropper et indiquez-nous 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. Ce post a été examiné par Joe Medley.