Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iam-medvedev/eyedropper-polyfill
EyeDropper API Polyfill
https://github.com/iam-medvedev/eyedropper-polyfill
api eye-dropper eyedropper polyfill
Last synced: 10 days ago
JSON representation
EyeDropper API Polyfill
- Host: GitHub
- URL: https://github.com/iam-medvedev/eyedropper-polyfill
- Owner: iam-medvedev
- License: mit
- Created: 2023-08-09T18:05:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-09T19:35:09.000Z (about 1 year ago)
- Last Synced: 2024-10-15T04:12:09.750Z (24 days ago)
- Topics: api, eye-dropper, eyedropper, polyfill
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/eyedropper-polyfill
- Size: 937 KB
- Stars: 14
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `eyedropper-polyfill`
`eyedropper-polyfill` provides a polyfill implementation for the [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper), 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](https://caniuse.com/mdn-api_eyedropper).
[DEMO](https://stackblitz.com/edit/vitejs-vite-qwd1pv?file=main.js)
## Table of Contents
- [`eyedropper-polyfill`](#eyedropper-polyfill)
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Opening the EyeDropper](#opening-the-eyedropper)
- [Aborting](#aborting)
- [Limitations](#limitations)
- [Contributing](#contributing)
- [License](#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
```bash
yarn add eyedropper-polyfill
```
or
```bash
npm install eyedropper-polyfill
```
or
```typescript
import 'https://esm.sh/eyedropper-polyfill@latest';
```
## Usage
Import the `EyeDropperPolyfill` from the package:
```typescript
import 'eyedropper-polyfill';
```
It will create EyeDropper support via `window.EyeDropper`.
### Opening the EyeDropper
```typescript
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
```typescript
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](https://html2canvas.hertzen.com), you can look at their [limitations](https://html2canvas.hertzen.com/documentation.html#limitations).
## Contributing
Contributions are welcome! If you find any issues or have suggestions, please open an issue on the [GitHub repository](https://github.com/iam-medvedev/eyedropper-polyfill).
## License
This package is distributed under the [MIT License](https://opensource.org/licenses/MIT).