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 criaçã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 extraiam cores da tela para que não precisem adivinhar uma cor e correr o risco de errar. O PowerPoint também tem uma ferramenta de conta-gotas, útil para definir o contorno ou a cor de 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 usuários. No entanto, fazer isso na Web é difícil, se possível, especialmente se você quer 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 atender às próprias necessidades.

O elemento <input type="color"> se aproxima. Em navegadores baseados no Chromium em dispositivos de área de trabalho, ele oferece um conta-gotas útil no menu suspenso do seletor de cores. No entanto, isso significa que seu app precisaria ser personalizado com CSS e envolvido em um pouco de JavaScript para ficar disponível para 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

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 em 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 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 de conta-gotas. Isso pode ser útil se o estado do app mudar de forma significativa. Talvez uma caixa de diálogo pop-up apareça e exija a entrada do usuário. O modo de conta-gotas precisa ser interrompido nesse ponto.

Para cancelar o eyedropper, 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();

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!

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

Teste a demonstração do jogo de cores, por exemplo. Clique no botão Play e, em um tempo limitado, tente amostrar 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 com a privacidade e a segurança potencialmente perigosa. 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 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 no botão.
Em segundo lugar, nenhuma informação do 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 eyedropper não pode ser usado em segundo plano sem que o usuário perceba.
Para ajudar os usuários a notar o modo de conta-gotas com facilidade, os navegadores precisam tornar o modo óbvio. É por isso que o cursor normal do mouse desaparece após um breve 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 de conta-gotas a qualquer momento pressionando a tecla esc.

Feedback

A equipe do Chromium quer saber sobre sua experiência com a API EyeDropper.

Conte 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 para implementar sua ideia? Tem dúvidas ou comentários sobre o modelo de segurança? Registre um problema de especificação no repositório do GitHub da API ou adicione sua opinião 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 Components. O Glitch é ótimo para compartilhar reprosagens rápidas e fáceis.

Mostrar suporte para a API

Você planeja usar a API EyeDropper? Seu apoio público ajuda a equipe do Chromium a priorizar os 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 analisada por Joe Medley.