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}
}

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!