1.0.3 • Published 9 months ago
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