https://github.com/9am/img-halftone
A web component turns <img> into halftone 🥑
https://github.com/9am/img-halftone
canvas cmyk custom-element halftone img webcomponent
Last synced: 4 months ago
JSON representation
A web component turns <img> into halftone 🥑
- Host: GitHub
- URL: https://github.com/9am/img-halftone
- Owner: 9am
- License: mit
- Created: 2023-08-02T09:46:43.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-14T08:35:22.000Z (almost 3 years ago)
- Last Synced: 2025-10-08T10:11:25.200Z (9 months ago)
- Topics: canvas, cmyk, custom-element, halftone, img, webcomponent
- Language: TypeScript
- Homepage:
- Size: 23.4 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
<img-halftone>
A web component turns <img> into halftone.🥑
## Features
- 🎨 Print halftone image with **CMYK**.
- ⚙️ Halftone is performed in **web worker**.
- 📜 Render with **Canvas** or **HTML element**.
- 🧩 Various **dot shapes** supported.
- 🔖 **Alt** support for **Accessibility**.
- 🛎 A **loading** className on the host.
- 💽 **≈ 3kB** minzipped.
## Demo
|Description|Live demo|
|:---------:|:-------:|
|Default setting with a zoom-in-out animation|[**codepen**](https://codepen.io/9am/pen/jOQdrmX)|
|Render with different `varient`|[**codepen**](https://codepen.io/9am/pen/vYQbaRJ)|
|Render with different `cellsize`|[**codepen**](https://codepen.io/9am/pen/OJadweB)|
|Render with different `shape`|[**codepen**](https://codepen.io/9am/pen/YzRBOKY)|
|Concurrent processing|[**codepen**](https://codepen.io/9am/pen/XWyOBjL)|
## Usage
#### Install
```sh
npm install @9am/img-halftone
```
```js
import '@9am/img-halftone'
```
#### Or use a CDN link
```html
```
```html
```
#### HTML
```html
```
## Documentation
### <img-halftone> attributes
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|`src`|{string}|**Required**|The image URL|
|`alt`|{string}|img-halftone|The alternative text description|
|`varient`|{canvas \| grid}|canvas|The Render type *(Notice: using 'grid' with small cellsize will cause layout performance problem.)*|
|`cellsize`|{number}|4|The cell size for each dot in pixel|
|`shape`|{circle \| triangle \| rectangle \| hexagon }|circle|The shape of dots|
## License
[MIT](LICENSE)