eyedropper-polyfill

eyedropper-polyfill provides a polyfill implementation for the EyeDropper API, allowing you to capture colors from any part of a webpage.

This package was inspired by the EyeDropper API and the need for a consistent color selection mechanism across various browsers where the EyeDropper API is not natively supported.

DEMO

Table of Contents

• eyedropper-polyfill
  • Table of Contents
  • Features
  • Installation
  • Usage
    • Opening the EyeDropper
    • Aborting
  • Limitations
  • Contributing
  • License

Features

• Provides a polyfilled implementation of the EyeDropper API for capturing colors from web pages.
• Supports selection of colors from different parts of the webpage.
• Offers a magnifier for precise color selection.
• Handles asynchronous operations and signal abortions.

Installation

yarn add eyedropper-polyfill

or

npm install eyedropper-polyfill

or

import 'https://esm.sh/eyedropper-polyfill@latest';

Usage

Import the EyeDropperPolyfill from the package:

import 'eyedropper-polyfill';

It will create EyeDropper support via window.EyeDropper.

Opening the EyeDropper

const eyeDropper = new window.EyeDropper();

eyeDropper
  .open()
  .then((colorSelectionResult) => {
    // Use the selected color information
    console.log('Selected color:', colorSelectionResult.sRGBHex);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Aborting

const eyeDropper = new window.EyeDropper();
const abortController = new window.AbortController();
const signal = abortController.signal;

// Set up an event listener to abort the operation after a certain time
setTimeout(() => {
  abortController.abort();
}, 5000); // Abort after 5 seconds

eyeDropper
  .open({ signal })
  .then((colorSelectionResult) => {
    // Use the selected color information
    console.log('Selected color:', colorSelectionResult.sRGBHex);
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Operation was aborted.');
    } else {
      console.error('Error:', error);
    }
  });

Limitations

Since this package is based on html2canvas, you can look at their limitations.

Contributing

Contributions are welcome! If you find any issues or have suggestions, please open an issue on the GitHub repository.

License

This package is distributed under the MIT License.