Skip to content

9am/img-halftone

Repository files navigation

img-tissue

<img-halftone>

A web component turns <img> into halftone.🥑

GitHub npm npm npm bundle size

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