- 🎨 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.
| 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 |
npm install @9am/img-halftone
import '@9am/img-halftone'
<script type="module" src="https://cdn.skypack.dev/@9am/img-halftone"></script>
<script src="https://www.unpkg.com/@9am/img-halftone"></script>
<img-halftone src="img.png"></img-halftone>
<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 |
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent