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.
- 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.
yarn add eyedropper-polyfillor
npm install eyedropper-polyfillor
import 'https://esm.sh/eyedropper-polyfill@latest';Import the EyeDropperPolyfill from the package:
import 'eyedropper-polyfill';It will create EyeDropper support via window.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);
});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);
}
});Since this package is based on html2canvas, you can look at their limitations.
Contributions are welcome! If you find any issues or have suggestions, please open an issue on the GitHub repository.
This package is distributed under the MIT License.