Escolher cores de qualquer pixel na tela com a API EyeDropper

A API EyeDropper permite que os autores usem um conta-gotas fornecido pelo navegador na criação de seletores de cores personalizados.

Patrick Brosset
Patrick Brosset
Página inicial
Thomas Steiner

O que é a API EyeDropper?

Muitos aplicativos criativos permitem que os usuários escolham cores de partes da janela do app ou até mesmo da tela inteira, geralmente usando uma metáfora de conta-gotas.

O Photoshop, por exemplo, permite que os usuários escolham cores na tela para não precisarem adivinhar e correr o risco de errar. O PowerPoint também tem uma ferramenta de conta-gotas, útil para definir a cor de contorno ou preenchimento de uma forma. Até mesmo o Chromium DevTools tem um conta-gotas que você pode usar ao editar cores no painel de estilos CSS para não precisar lembrar ou copiar o código de cor de outro lugar.

Se você estiver criando um aplicativo criativo com tecnologias da Web, talvez queira oferecer um recurso semelhante aos seus usuários. No entanto, fazer isso na Web é difícil, se possível, especialmente se você quiser amostrar cores de toda a tela do dispositivo (por exemplo, de um aplicativo diferente) e não apenas da guia atual do navegador. Não há uma ferramenta de conta-gotas fornecida pelo navegador que os apps da Web possam usar para as próprias necessidades.

O elemento <input type="color"> se aproxima. Em navegadores baseados no Chromium executados em dispositivos desktop, ele oferece um conta-gotas útil no menu suspenso do seletor de cores. No entanto, isso significa que o app precisaria personalizar com CSS e envolver em um pouco de JavaScript para disponibilizar a outras partes do app. Escolher essa opção também significa que outros navegadores não teriam acesso ao recurso.

A API EyeDropper preenche essa lacuna oferecendo uma maneira de amostrar cores da tela.

Seletor de cores do Chromium.

Como usar a API EyeDropper

Suporte ao navegador

Browser Support

  • Chrome: 95.
  • Edge: 95.
  • Firefox: not supported.
  • Safari: not supported.

Source

Detecção de recursos e compatibilidade com navegadores

Primeiro, verifique se a API está disponível antes de usá-la.

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

A API EyeDropper é compatível com navegadores baseados no Chromium, como Edge ou Chrome, a partir da versão 95.

Como usar a API

Para usar a API, crie um objeto EyeDropper e chame o método open() dele.

const eyeDropper = new EyeDropper();

O método open() retorna uma promessa que é resolvida depois que o usuário seleciona um pixel na tela, e o valor resolvido dá acesso à cor do pixel no formato sRGBHex (#RRGGBB). A promessa é rejeitada se o usuário sair do modo de conta-gotas pressionando a tecla 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.
}

O código do app também pode cancelar o modo conta-gotas. Isso pode ser útil se o estado do app mudar de maneira significativa. Talvez uma caixa de diálogo pop-up apareça e exija a entrada do usuário. O modo conta-gotas será interrompido nesse ponto.

Para cancelar o conta-gotas, use um sinal de objeto AbortController e transmita-o ao método 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();

Juntando tudo, confira abaixo uma função assíncrona reutilizável:

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

Confira!

No Microsoft Edge ou no Google Chrome 95 ou mais recente, no Windows ou Mac, abra uma das demonstrações do conta-gotas.

Por exemplo, teste a demonstração do jogo de cores. Clique no botão Tocar e, em um período limitado, tente selecionar uma cor da lista na parte de baixo que corresponda ao quadrado colorido na parte de cima.

Demonstração do jogo de cores.

Considerações sobre privacidade e segurança

Por trás dessa API da Web aparentemente simples, há uma preocupação potencialmente prejudicial com privacidade e segurança. E se um site malicioso pudesse começar a ver pixels da sua tela?

Para resolver esse problema, a especificação da API exige as seguintes medidas:

  • Primeiro, a API não permite que o modo conta-gotas seja iniciado sem a intenção do usuário. O método open() só pode ser chamado em resposta a uma ação do usuário, como um clique em um botão.
  • Em segundo lugar, nenhuma informação de pixel pode ser recuperada sem a intenção do usuário. A promessa retornada por open() só é resolvida para um valor de cor em resposta a uma ação do usuário (clicar em um pixel). Portanto, o conta-gotas não pode ser usado em segundo plano sem que o usuário perceba.
  • Para ajudar os usuários a notar o modo conta-gotas com facilidade, os navegadores precisam deixar o modo óbvio. Por isso, o cursor normal do mouse desaparece após um pequeno atraso, e a interface do usuário dedicada aparece no lugar. Também há um atraso entre o início do modo conta-gotas e o momento em que o usuário pode selecionar um pixel para garantir que ele tenha tido tempo de ver a lupa.
  • Por fim, os usuários podem cancelar o modo conta-gotas a qualquer momento pressionando a tecla esc.

Feedback

A equipe do Chromium quer saber sobre suas experiências com a API EyeDropper.

Fale sobre o design da API

Há algo na API que não funciona como esperado? Ou há métodos ou propriedades ausentes que você precisa implementar sua ideia? Tem uma dúvida ou um comentário sobre o modelo de segurança? Registre um problema de especificação no repositório do GitHub da API ou adicione suas ideias a um problema existente.

Informar um problema com a implementação

Você encontrou um bug na implementação do Chromium? Ou a implementação é diferente da especificação? Registre um bug em new.crbug.com. Inclua o máximo de detalhes possível, instruções simples para reprodução e digite Blink>Forms>Color na caixa Componentes.

Mostrar suporte à API

Você planeja usar a API EyeDropper? Seu apoio público ajuda a equipe do Chromium a priorizar recursos e mostra a outros fornecedores de navegadores a importância de oferecer suporte a eles. Envie um tweet para @ChromiumDev usando a hashtag #EyeDropper e informe onde e como você está usando.

Links úteis

Agradecimentos

A API EyeDropper foi especificada e implementada por Ionel Popescu da equipe do Microsoft Edge. Esta postagem foi revisada por Joe Medley.