🎨 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
