Cómo elegir colores de cualquier píxel en la pantalla con la API de EyeDropper

La API de EyeDropper permite que los autores usen un cuentagotas proporcionado por el navegador en la creación de selectores de color personalizados.

Patrick Brosset
Patrick Brosset
Página principal
Thomas Steiner

¿Qué es la API de EyeDropper?

Muchas aplicaciones creativas permiten a los usuarios elegir colores de partes de la ventana de la app o incluso de toda la pantalla, por lo general, con una metáfora de cuentagotas.

Por ejemplo, Photoshop permite a los usuarios tomar muestras de colores del lienzo para que no tengan que adivinar un color y correr el riesgo de equivocarse. PowerPoint también tiene una herramienta de cuentagotas, que es útil cuando se establece el color de contorno o de relleno de una forma. Incluso las Herramientas para desarrolladores de Chromium tienen un cuentagotas que puedes usar cuando editas colores en el panel de estilos CSS para que no tengas que recordar ni copiar el código de color de otro lugar.

Si estás creando una aplicación creativa con tecnologías web, es posible que quieras proporcionar una función similar a tus usuarios. Sin embargo, hacerlo en la Web es difícil, si es que es posible, en especial si quieres tomar muestras de color de toda la pantalla del dispositivo (por ejemplo, de una aplicación diferente) y no solo de la pestaña del navegador actual. No hay una herramienta de cuentagotas proporcionada por el navegador que las apps web puedan usar para sus propias necesidades.

El elemento <input type="color"> se acerca. En los navegadores basados en Chromium que se ejecutan en dispositivos de escritorio, proporciona un cuentagotas útil en el menú desplegable del selector de color. Sin embargo, si usas esta opción, tu app tendría que personalizarla con CSS y envolverla en un poco de JavaScript para que esté disponible en otras partes de la app. Si eliges esta opción, otros navegadores tampoco tendrían acceso a la función.

La API de EyeDropper llena este vacío, ya que proporciona una forma de tomar muestras de colores de la pantalla.

Selector de color de Chromium.

Cómo usar la API de EyeDropper

Navegadores compatibles

Browser Support

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

Source

Detección de funciones y compatibilidad con el navegador

Primero, asegúrate de que la API esté disponible antes de usarla.

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

La API de EyeDropper es compatible con los navegadores basados en Chromium, como Edge o Chrome, a partir de la versión 95.

Usa la API

Para usar la API, crea un objeto EyeDropper y, luego, llama a su método open().

const eyeDropper = new EyeDropper();

El método open() devuelve una promesa que se resuelve después de que el usuario selecciona un píxel en la pantalla, y el valor resuelto proporciona acceso al color del píxel en formato sRGBHex (#RRGGBB). La promesa se rechaza si el usuario abandona el modo de cuentagotas presionando la 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.
}

El código de la app también puede cancelar el modo cuentagotas. Esto puede ser útil si el estado de la app cambia de forma significativa. Es posible que aparezca un diálogo emergente que requiera la entrada del usuario. En ese punto, se debe detener el modo de cuentagotas.

Para cancelar el cuentagotas, puedes usar el objeto signal de AbortController y pasarlo al 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();

Si juntamos todo, a continuación, puedes encontrar una función asíncrona reutilizable:

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

Pruébalo

En Windows o Mac, con Microsoft Edge o Google Chrome 95 o versiones posteriores, abre una de las demos de EyeDropper.

Por ejemplo, prueba la demostración del juego de colores. Presiona el botón Reproducir y, en un tiempo limitado, intenta tomar una muestra de un color de la lista que se encuentra en la parte inferior que coincida con el cuadrado de color de la parte superior.

Demostración del juego de colores.

Consideraciones de privacidad y seguridad

Detrás de esta API web aparentemente simple, se oculta un problema de privacidad y seguridad potencialmente dañino. ¿Qué sucedería si un sitio web malicioso pudiera comenzar a ver los píxeles de tu pantalla?

Para abordar esta inquietud, la especificación de la API requiere las siguientes medidas:

  • En primer lugar, la API no permite que se inicie el modo de cuentagotas sin la intención del usuario. Solo se puede llamar al método open() en respuesta a una acción del usuario (como un clic en un botón).
  • En segundo lugar, no se puede recuperar información de píxeles sin la intención del usuario. La promesa que devuelve open() solo se resuelve en un valor de color en respuesta a una acción del usuario (hacer clic en un píxel). Por lo tanto, no se puede usar el cuentagotas en segundo plano sin que el usuario lo note.
  • Para ayudar a los usuarios a notar el modo de cuentagotas fácilmente, los navegadores deben hacer que el modo sea obvio. Por eso, el cursor normal del mouse desaparece después de un breve retraso y, en su lugar, aparece la interfaz de usuario dedicada. También hay una demora entre el momento en que se inicia el modo de cuentagotas y el momento en que el usuario puede seleccionar un píxel para garantizar que haya tenido tiempo de ver la lupa.
  • Por último, los usuarios pueden cancelar el modo de cuentagotas en cualquier momento (presionando la tecla esc).

Comentarios

El equipo de Chromium quiere conocer tu experiencia con la API de EyeDropper.

Cuéntanos sobre el diseño de la API

¿Hay algo sobre la API que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad? Presenta un problema de especificación en el repositorio de GitHub de la API o agrega tus ideas a un problema existente.

Informa un problema con la implementación

¿Encontraste un error en la implementación de Chromium? ¿O la implementación es diferente de la especificación? Presenta un error en new.crbug.com. Asegúrate de incluir tantos detalles como sea posible, instrucciones sencillas para reproducir el error y, luego, ingresa Blink>Forms>Color en el cuadro Components.

Cómo mostrar compatibilidad con la API

¿Piensas usar la API de EyeDropper? Tu apoyo público ayuda al equipo de Chromium a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es admitirlas. Envía un tweet a @ChromiumDev con el hashtag #EyeDropper y cuéntanos dónde y cómo lo usas.

Vínculos útiles

Agradecimientos

La API de EyeDropper fue especificada e implementada por Ionel Popescu del equipo de Microsoft Edge. Joe Medley revisó esta publicación.