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 creare selettori di 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 dispone anche di uno strumento contagocce, utile per impostare il colore del contorno o del 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 creando un'applicazione creativa con tecnologie web, ti consigliamo di 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 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 poi 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 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à contagocce. Questa operazione può essere utile se lo stato dell'app cambia in modo sostanziale. Potrebbe essere visualizzata una finestra di dialogo popup che richiede l'input dell'utente. A questo punto, la modalità contagocce dovrebbe essere interrotta.

Per annullare l'apposito strumento, puoi utilizzare l'indicatore di un 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();

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 su privacy e 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 è possibile recuperare nuovamente informazioni sui pixel senza l'intenzione dell'utente. La promessa restituita da open() restituisce un valore di colore solo 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à contagocce, i browser devono renderla evidente. Questo è il motivo per cui il normale cursore del mouse scompare dopo un breve ritardo e viene visualizzata l'interfaccia utente dedicata. Inoltre, è presente un ritardo tra l'avvio 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 conoscere le tue esperienze con l'API EyeDropper.

Fornisci informazioni sul design 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 nel repo GitHub dell'API o aggiungi il tuo parere 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 utilizzando l'hashtag #EyeDropper e facci sapere dove e come lo stai utilizzando.

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.