Home > Web Front-end > CSS Tutorial > Eye Droppin'

Eye Droppin'

William Shakespeare
Release: 2025-03-16 10:15:10
Original
738 people have browsed it

Eye Droppin'

Chrome browser and related browsers have added a webpage API called EyeDropper , allowing web developers to easily obtain color values ​​at any location on the screen.

The following code snippet shows how to use the API:

 if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  try {
    // This requires user interaction to trigger const result = await eyeDropper.open();
    const colorHexValue = result.sRGBHex;
  } catch (err) {
    // User cancels color pickup}
}
Copy after login

This API currently only supports Chrome and related browsers. The development process began with Edge browser, and was later discussed and reviewed by the community group and finally launched in Chrome. While Chrome plays a leading role in the process, overall it is a positive case, especially considering that EyeDropper is a relatively minor feature.

The advantage of EyeDropper API is that it can pick up colors from the entire screen, which will significantly improve the user experience of design tools such as Figma, making up for the shortcomings of its color pickups being limited to within the canvas. Applications such as Slides.com and Polypane have applied the API to production environments, improving the user experience. In addition, corresponding Chrome extensions and bookmarklets have also appeared.

It is recommended to provide an accessible system color selector button while using EyeDropper API to enhance the user experience and achieve progressive enhancement. This can be developed as a standalone web component.

The above is the detailed content of Eye Droppin'. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template