Se usó la API de Cloud Translation para traducir esta página.

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

La API de EyeDropper permite a los autores usar un cuentagotas proporcionado por el navegador en la construcción de selectores de color personalizados.

Patrick Brosset

Thomas Steiner

¿Qué es la API de EyeDropper?

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

Photoshop, por ejemplo, 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 cuentagotas, útil cuando se configura el contorno o el color de relleno de una forma. Incluso las Herramientas para desarrolladores de Chromium tienen un cuentagotas que puedes usar cuando edites colores en el panel de estilos de CSS para que no tengas que recordar ni copiar el código de color de otro lugar.

Si estás compilando una aplicación creativa con tecnologías web, te recomendamos que proporciones una función similar a tus usuarios. Sin embargo, hacer esto en la Web es difícil, si es que es posible, en especial si quieres obtener muestras de colores 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, usar esto significa que tu app tendría que personalizarlo con CSS y unirlo en un poco de JavaScript para que esté disponible para otras partes de la app. Si eliges esta opción, otros navegadores no tendrán acceso a la función.

La API de EyeDropper cubre esta brecha, ya que proporciona una forma de obtener muestras de colores de la pantalla.

Selector de color de Chromium.

Cómo usar la API de EyeDropper

Navegadores compatibles

Origen

Detección de funciones y compatibilidad con navegadores

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 navegadores basados en Chromium, como Edge o Chrome, a partir de la versión 95.

Cómo usar la API

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

const eyeDropper = new EyeDropper();

El método open() muestra 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 sale del 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 manera sustancial. Quizás aparezca un diálogo emergente que requiera la entrada del usuario. El modo de cuentagotas debería detenerse en ese punto.

Para cancelar el cuentagotas, puedes usar el indicador de un objeto 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 lo unes todo, a continuación, encontrarás 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 Microsoft Edge o Google Chrome 95 o versiones posteriores, en Windows o Mac, abre una de las demos de EyeDropper.

Por ejemplo, prueba la demostración del juego de colores. Presiona el botón Play y, durante un tiempo limitado, intenta probar un color de la lista de la parte inferior que coincida con el cuadrado de color de la parte superior.

Demostración del juego en color.

Consideraciones de privacidad y seguridad

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

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

En primer lugar, la API no permite que el modo de cuentagotas se inicie sin el intent del usuario. Solo se puede llamar al método open() en respuesta a una acción del usuario (como hacer 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 muestra open() solo se resuelve en un valor de color en respuesta a una acción del usuario (hace clic en un píxel). Por lo tanto, el cuentagotas no se puede usar en segundo plano sin que el usuario lo note.
Para ayudar a los usuarios a detectar el modo de cuentagotas con facilidad, los navegadores deben hacer que el modo sea obvio. Por este motivo, el cursor del mouse normal desaparece después de una breve demora 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 asegurarse de 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 tus experiencias con la API de EyeDropper.

Cuéntanos sobre el diseño de la API

¿Existe algún aspecto de la API que no funcione como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad? Informa un problema de especificación en el repositorio de GitHub de la API o agrega tus comentarios a un problema existente.

Denuncia un problema con la implementación

¿Encontraste un error con la implementación de Chromium? ¿O la implementación es diferente de la especificación? Informa un error en new.crbug.com. Asegúrate de incluir tantos detalles como puedas, además de instrucciones simples para la reproducción, y, luego, ingresa Blink>Forms>Color en el cuadro Componentes. Glitch es excelente para compartir reproducciones rápidas y fáciles.

Demuestra compatibilidad con la API

¿Piensas usar la API de EyeDropper? Tu apoyo público ayuda al equipo de Chromium a priorizar las funciones y les 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

Ionel Popescu, del equipo de Microsoft Edge, especificó e implementó la API de EyeDropper. Joe Medley revisó esta publicación.