<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
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