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| |Render with different varient|codepen| |Render with different cellsize|codepen| |Render with different shape|codepen| |Concurrent processing|codepen|

Usage

Install

npm install @9am/img-halftone

import '@9am/img-halftone'

Or use a CDN link

<script type="module" src="https://cdn.skypack.dev/@9am/img-halftone"></script>

<script src="https://www.unpkg.com/@9am/img-halftone"></script>

HTML

<img-halftone src="img.png"></img-halftone>

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