Scegliere i colori di qualsiasi pixel sullo schermo con l'API EyeDropper

L'API EyeDropper consente agli autori di usare un contagocce fornito dal browser nella creazione di selettori personalizzati.

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

Che cos'è l'API EyeDropper?

Molte applicazioni creative consentono agli utenti di scegliere i colori da alcune parti della finestra dell'app o anche dall'intero schermo, in genere usando una metafora del contagocce.

Photoshop, ad esempio, consente agli utenti di campionare i colori dalla tela, in modo da non dover indovinare il colore e rischiare di sbagliare. PowerPoint ha anche uno strumento Contagocce, utile per impostare il colore di contorno o riempimento di una forma. Anche Chromium DevTools ha un contagocce che puoi usare quando modifichi i colori nel riquadro degli stili CSS, così non devi ricordare o copiare il codice colore da qualche altra parte.

Se stai creando un'applicazione creativa con tecnologie web, potresti voler fornire una funzionalità simile ai tuoi utenti. Tuttavia, non è facile farlo sul web, se possibile, soprattutto se vuoi campionare i colori dello schermo dell'intero dispositivo (ad esempio, di un'altra applicazione) e non solo della scheda del browser corrente. Non esiste uno strumento di contagocce fornito dal browser che le app web possano usare per le proprie esigenze.

L'elemento <input type="color"> si avvicina. Sui browser basati su Chromium in esecuzione su dispositivi desktop, offre un utile contagocce nel menu a discesa del selettore colori. Tuttavia, questo significa che la tua app dovrebbe personalizzarla con CSS e includerla un po' di JavaScript per renderla disponibile in altre parti dell'app. Se scegli questa opzione, anche altri browser non avranno accesso alla funzionalità.

L'API EyeDropper colma questa lacuna offrendo un modo per campionare i colori sullo schermo.

Selettore colori di Chromium.

Come utilizzare l'API EyeDropper

Supporto del browser

Supporto dei browser

  • 95
  • 95
  • x
  • x

Fonte

Rilevamento delle funzionalità e supporto del browser

Innanzitutto, assicurati che l'API sia disponibile prima di utilizzarla.

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

L'API EyeDropper è supportata sui browser basati su Chromium come Edge o Chrome a partire dalla versione 95.

Utilizzo dell'API

Per utilizzare l'API, crea un oggetto EyeDropper e chiama il relativo metodo open().

const eyeDropper = new EyeDropper();

Il metodo open() restituisce una promessa che si risolve dopo che l'utente seleziona un pixel sullo schermo e il valore risolto fornisce l'accesso al colore del pixel nel formato sRGBHex (#RRGGBB). La promessa viene rifiutata se l'utente esce dalla modalità contagocce premendo il tasto 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.
}

Il codice dell'app può anche annullare la modalità Contagocce. Questo può essere utile se lo stato dell'app cambia notevolmente. Potrebbe essere visualizzata una finestra di dialogo popup che richiede l'input dell'utente. La modalità contagocce dovrebbe essere interrotta a quel punto.

Per annullare il contagocce, puoi utilizzare un segnale dell'oggetto AbortController e passarlo al metodo 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();

Combinando tutto, di seguito puoi trovare una funzione asincrona riutilizzabile:

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

Prova.

Utilizzando Microsoft Edge o Google Chrome 95 o versioni successive, su Windows o Mac, apri una delle demo di EyeDropper.

Ad esempio, prova la demo del gioco a colori. Premi il pulsante Riproduci e, in un periodo di tempo limitato, prova a campionare un colore dall'elenco in basso che corrisponda al quadrato colorato in alto.

Demo del gioco a colori.

Considerazioni su privacy e sicurezza

Dietro a questa semplice API web si nasconde un problema di privacy e sicurezza potenzialmente dannoso. E se un sito web dannoso potesse iniziare a vedere i pixel dello schermo?

Per risolvere questo problema, la specifica dell'API richiede le seguenti misure:

  • Innanzitutto, l'API non consente di avviare la modalità contagocce senza l'intenzione dell'utente. Il metodo open() può essere chiamato solo in risposta a un'azione dell'utente, ad esempio il clic su un pulsante.
  • Inoltre, nessuna informazione sui pixel può essere recuperata di nuovo senza l'intenzione dell'utente. La promessa restituita da open() si risolve in un valore del colore solo in risposta a un'azione dell'utente (clic su un pixel). Di conseguenza, non è possibile usare il contagocce in background senza che l'utente se ne accorga.
  • Per aiutare gli utenti a notare facilmente la modalità contagocce, i browser sono necessari per renderla ovvia. Questo è il motivo per cui il normale cursore del mouse scompare dopo un breve ritardo e viene visualizzata l'interfaccia utente dedicata. C'è anche un ritardo tra l'attivazione della modalità Contagocce e il momento in cui l'utente può selezionare un pixel per assicurarsi che abbia avuto il tempo di vedere la lente d'ingrandimento.
  • Infine, gli utenti possono annullare la modalità Contagocce in qualsiasi momento (premendo il tasto Esc).

Feedback

Il team di Chromium vuole saperne di più sulle tue esperienze con l'API EyeDropper.

Parlaci della progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza? Segnala un problema relativo alle specifiche sul repository GitHub dell'API o aggiungi le tue opinioni su un problema esistente.

Segnala un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chromium? Oppure l'implementazione è diversa dalle specifiche? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile e di istruzioni semplici per la riproduzione e inserisci Blink>Forms>Color nella casella Componenti. Glitch funziona benissimo per condividere riproduzioni rapide e semplici.

Mostra il supporto dell'API

Hai intenzione di utilizzare l'API EyeDropper? Il supporto pubblico aiuta il team di Chromium a stabilire la priorità delle funzionalità e mostra ad altri fornitori di browser l'importanza di supportarle. Invia un tweet a @ChromiumDev usando l'hashtag #EyeDropper e facci sapere dove e come lo stai usando.

Link utili

Ringraziamenti

L'API EyeDropper è stata specificata e implementata da Ionel Popescu del team di Microsoft Edge. Questo post è stato esaminato da Joe Medley.