La API de EyeDropper permite a los autores usar un cuentagotas proporcionado por el navegador en la construcción de selectores de color personalizados.
¿Qué es la API de EyeDropper?
Muchas aplicaciones creativas permiten que los usuarios seleccionen colores de partes de la ventana de la app o incluso de toda la pantalla, a través de 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 arriesgarse a equivocarse. PowerPoint también tiene una herramienta de cuentagotas, que resulta útil a la hora de definir el contorno o el color 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 compilando una aplicación creativa con tecnologías web, recomendamos que proporciones una función similar a tus usuarios. Sin embargo, es difícil hacerlo en la Web, si es posible, en especial si quieres tomar muestras de colores de toda la pantalla del dispositivo (por ejemplo, de una aplicación diferente) y no solo de la pestaña actual del navegador. No existe 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á que personalizarla con CSS y unirla a 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.
Para llenar este vacío, la API de EyeDropper proporciona una forma de tomar muestras de colores de la pantalla.
Cómo usar la API de EyeDropper
Navegadores compatibles
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 los 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, luego, 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 de cuentagotas. Esto puede ser útil si el estado de la app cambia de manera sustancial. Es posible que aparezca un diálogo emergente y requiera la entrada del usuario. El modo de cuentagotas debería detenerse en ese momento.
Para cancelar el cuentagotas, puedes usar la señal de un objeto AbortController y pasarla 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();
En resumen, puedes encontrar una función asíncrona reutilizable a continuación:
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
Con Microsoft Edge o Google Chrome 95 o una versión posterior, en Windows o Mac, abre una de las demostraciones de EyeDropper.
Prueba la demostración del juego en color, por ejemplo. Presiona el botón Reproducir y, en un tiempo limitado, intenta muestrear un color de la lista en la parte inferior que coincida con el cuadrado de color en la parte superior.
Consideraciones de privacidad y seguridad
Detrás de esta API web aparentemente simple, se oculta una preocupación potencialmente dañina sobre la privacidad y seguridad. ¿Qué pasaría si un sitio web malicioso pudiera comenzar a ver píxeles de tu pantalla?
Para abordar este problema, la especificación de la API requiere las siguientes medidas:
- Primero, 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 ninguna información de los píxeles sin la intención del usuario nuevamente. La promesa que muestra
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, se requiere que los navegadores lo establezcan como obvio. Es por eso que el cursor normal del mouse desaparece después de una breve demora y aparece la interfaz de usuario dedicada en su lugar. 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 acerca de 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? Informa un problema de especificaciones en el repositorio de GitHub de la API o agrega tus ideas a un problema existente.
Informar 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?
Informa un error en new.crbug.com. Asegúrate de incluir tantos detalles como puedas, además de instrucciones simples para reproducir el error, y, luego, ingresa Blink>Forms>Color en el cuadro Componentes.
Glitch funciona muy bien para compartir repros rápidos y fáciles.
Muestra compatibilidad con la API
¿Planeas usar la API de EyeDropper? La asistencia pública ayuda al equipo de Chromium a priorizar funciones y le muestra a otros proveedores de navegadores la importancia de admitirlas. Envía un tweet a @ChromiumDev con el hashtag #EyeDropper y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Explicación pública
- Borrador de especificaciones
- Demostración de la API de EyeDropper | Fuente de la demostración de la API de EyeDropper
- Error de seguimiento de Chromium
- Entrada de ChromeStatus.com
- Componente de Blink:
Blink>Forms>Color - Revisión de la etiqueta
- Solicitud de posición de WebKit
- Solicitud de posición de Mozilla
- Intención de realizar el envío
Agradecimientos
Ionel Popescu del equipo de Microsoft Edge especificó e implementó la API de EyeDropper. Joe Medley revisó esta publicación.