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: 5 days 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 (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-14T08:35:22.000Z (about 1 year ago)
• Last Synced: 2024-03-14T15:12:40.846Z (7 months ago)
• Topics: canvas, cmyk, custom-element, halftone, img, webcomponent
• Language: TypeScript
• Homepage:
• Size: 23.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• 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)