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 des couleurs à partir du canevas afin qu'ils n'aient pas à deviner une couleur et à 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 créez une application créative avec des technologies Web, vous pouvez proposer une fonctionnalité similaire à vos utilisateurs. Toutefois, sur le Web, cette opération est difficile, voire impossible, en particulier si vous souhaitez échantillonner des couleurs à partir de l'ensemble de l'écran de l'appareil (par exemple, à partir d'une autre application) et pas seulement à partir de l'onglet du navigateur actuel. Il n'existe pas d'outil de pipette fourni par le navigateur que les applications Web peuvent utiliser pour leurs propres besoins.

L'élément <input type="color"> s'en rapproche. Sur les navigateurs Chromium exécutés sur des ordinateurs, 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 permettant d'échantillonner des couleurs à partir de l'écran.

Sélecteur de couleur Chromium.

Utiliser l'API EyeDropper

Prise en charge des navigateurs

Navigateurs pris en charge

Source

Détection des 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 É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. 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();

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

Dans Microsoft Edge ou Google Chrome 95 ou version ultérieure, sur Windows ou Mac, ouvrez l'une des démonstrations de la pipette.

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). Par conséquent, l'outil Pipette ne peut pas être utilisé en arrière-plan sans que l'utilisateur ne s'en aperçoive.
Pour aider les utilisateurs à remarquer facilement le mode pipette, les navigateurs doivent 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 Échap).

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, des instructions simples pour reproduire le problème et saisissez Blink>Forms>Color dans le champ Composants. Glitch est idéal pour partager des reproductions rapidement et facilement.

Afficher la compatibilité avec 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. Cet article a été examiné par Joe Medley.