Esta página foi traduzida pela API Cloud Translation.

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 construção de seletores de cores personalizados.

Patrick Brosset

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 de toda a tela, normalmente usando uma metáfora de conta-gotas.

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

Se você estiver desenvolvendo um aplicativo criativo com tecnologias da Web, convém fornecer um recurso semelhante aos seus usuários. No entanto, fazer isso na Web é difícil, se possível, especialmente se você quiser fazer amostras de cores da tela do dispositivo inteiro (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"> chega perto. Em navegadores baseados no Chromium executados em dispositivos desktop, ela fornece um conta-gotas útil no menu suspenso do seletor de cores. No entanto, usar essa opção significa que seu app teria que personalizá-la com CSS e envolvê-la em um pouco de JavaScript para disponibilizá-la a outras partes do app. Usar essa opção também significa que outros navegadores não teriam acesso ao recurso.

A API EyeDropper preenche essa lacuna fornecendo uma maneira de criar amostras de cores na tela.

Seletor de cores do Chromium.

Como usar a API EyeDropper

Suporte ao navegador

Compatibilidade com navegadores

Origem

Detecção de recursos e suporte a navegadores

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

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

A API EyeDropper tem suporte a navegadores baseados no Chromium, como o Edge ou o 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 fornece 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 poderá ser útil se o estado do app mudar de forma significativa. Pode ser que uma caixa de diálogo pop-up apareça e exija a entrada do usuário. O modo conta-gotas será interrompido nesse momento.

Para cancelar o conta-gotas, use o sinal de um 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, abaixo você encontra 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!

Usando o Microsoft Edge ou o Google Chrome 95 ou posterior, no Windows ou Mac, abra uma das demonstrações do EyeDropper.

Confira a demonstração do jogo colorido, por exemplo. Pressione o botão Play e, por um tempo limitado, tente usar uma cor da lista na parte de baixo que corresponde 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, está oculta uma preocupação potencialmente prejudicial de privacidade e segurança. E se um site malicioso começar a ver pixels na sua tela?

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

Primeiro, a API não permite que o modo de 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 de botão).
Segundo, nenhuma informação de pixel pode ser recuperada sem a intenção do usuário novamente. A promessa retornada por open() só é resolvida com 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 facilmente, os navegadores precisam tornar esse modo óbvio. É por isso que o cursor normal do mouse desaparece após um pequeno atraso, e a interface do usuário dedicada aparece. Há também um atraso entre o início do modo de conta-gotas e o momento em que o usuário pode selecionar um pixel para garantir que ele tenha 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 mais sobre suas experiências com a API EyeDropper.

Fale sobre o design da API

Algo na API não funciona como você esperava? Ou há métodos ou propriedades ausentes que você precisa para implementar sua ideia? Tem alguma dúvida ou comentário sobre o modelo de segurança? Registre um problema específico 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 insira Blink>Forms>Color na caixa Componentes. O Glitch funciona muito bem para compartilhar repetições rápidas e fáceis.

Mostrar suporte à API

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

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.