Questa pagina è stata tradotta dall'API Cloud Translation.

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

L'API EyeDropper consente agli autori di utilizzare un contagocce fornito dal browser per la creazione di selettori colori personalizzati.

Patrick Brosset

Thomas Steiner

Che cos'è l'API EyeDropper?

Molte applicazioni creative consentono agli utenti di scegliere i colori da parti della finestra dell'app o addirittura dall'intera schermata, in genere utilizzando una metafora del contagocce.

Photoshop, ad esempio, consente agli utenti di campionare i colori dalla tela in modo da non dover indovinare un colore e rischiare di sbagliare. PowerPoint ha anche uno strumento Contagocce, utile per impostare il contorno o il colore di riempimento di una forma. Anche Chromium DevTools ha un'apposita funzionalità che puoi utilizzare per modificare i colori nel riquadro degli stili CSS, in modo da non dover ricordare o copiare il codice colore da un'altra posizione.

Se stai realizzando un'applicazione creativa con tecnologie web, potrebbe essere opportuno fornire una funzionalità simile ai tuoi utenti. Tuttavia, eseguire questa operazione sul web è difficile, se non impossibile, soprattutto se vuoi campionare i colori dall'intero schermo del dispositivo (ad esempio da un'altra applicazione) e non solo dalla scheda del browser corrente. Non esiste uno strumento contagocce fornito dal browser che le app web possano utilizzare per le proprie esigenze.

L'elemento <input type="color"> è simile. Nei browser basati su Chromium in esecuzione su computer, fornisce un utile eyedropper nel menu a discesa del selettore dei colori. Tuttavia, se scegli questa opzione, l'app dovrà essere personalizzata con CSS e racchiusa in un po' di codice JavaScript per renderla disponibile ad altre parti dell'app. Inoltre, gli altri browser non avranno accesso alla funzionalità.

L'API EyeDropper colma questa lacuna fornendo un modo per campionare i colori dallo schermo.

Selettore colori di Chromium.

Come utilizzare l'API EyeDropper

Supporto browser

Supporto dei browser

Origine

Rilevamento delle funzionalità e supporto dei browser

Prima di utilizzarla, assicurati che l'API sia disponibile.

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

L'API EyeDropper è supportata nei 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 poi chiama il relativo metodo open().

const eyeDropper = new EyeDropper();

Il metodo open() restituisce una promessa che si risolve dopo che l'utente ha selezionato un pixel sullo schermo e il valore risolto fornisce l'accesso al colore del pixel in 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à del contagocce. Questo può tornare utile se lo stato dell'app cambia notevolmente. Può accadere che venga visualizzata una finestra di dialogo popup che richiede l'input dell'utente. A questo punto, la modalità contagocce dovrebbe essere interrotta.

Per annullare il contagocce, puoi utilizzare un 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();

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

Prova la demo del gioco a colori, ad esempio. 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 Colori.

Considerazioni sulla privacy e sulla sicurezza

Dietro questa API web apparentemente semplice si nasconde un problema potenzialmente dannoso per la privacy e la sicurezza. Cosa succederebbe se un sito web dannoso potesse iniziare a vedere i pixel del tuo 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 un clic su un pulsante).
In secondo luogo, non è più possibile recuperare le informazioni sui pixel senza l'intento dell'utente. La promessa restituita da open() si risolve solo in un valore di colore in risposta a un'azione dell'utente (clic su un pixel). Pertanto, il piatto di colore non può essere utilizzato in background senza che l'utente se ne accorga.
Per aiutare gli utenti a notare facilmente la modalità con contagocce, i browser devono rendere la modalità più 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'avvio della modalità contagocce e il momento in cui l'utente può selezionare un pixel per assicurarsi che l'utente 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ù sulla tua esperienza con l'API EyeDropper.

Fornisci informazioni sul design dell'API

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

Segnalare un problema con l'implementazione

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

Mostra il supporto per l'API

Intendi utilizzare l'API EyeDropper? Il tuo supporto pubblico aiuta il team di Chromium a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle. Invia un tweet a @ChromiumDev usando l'hashtag #EyeDropper e facci sapere dove e come lo utilizzi.

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.