<img-victor>

A web component converting <img> to SVG <path> with a drawing effect

Demo

Usage

1. Installation

   npm install @9am/img-victor
   

2. ESM

   import { register } from '@9am/img-victor';
   register({/* options */})
   
   // html
   <img-victor src="/img.png"></img-victor>

Documentation

Attributes

Name	Type	Default	Description
src	{String}	Required if data-src unset	The image URL
data-src	{String}	Required if src unset	The lazy-loading src
title	{String}	''	For screen readers
ratio	{String}	'1:1'	${width}:${height} to prevent reflow before iamge loading
manual	{Boolean}	false	When manual is true, img-victor will not draw automatically, it could be done by toggle the className active

CSS property

Name	Type	Default	Description
--victor-stroke	css <color>	dimgray	svg path stroke color
--victor-stroke-width	css <length>	0.3%	svg path stroke width
--victor-stroke-linecap	{butt|round|square|inherit}	round	svg path stroke linecap
--victor-stroke-linejoin	{arcs|bevel|miter|miter-clip|round}	round	svg path stroke linejoin
--victor-duration	css <transition-duration>	3200ms	transition duration
--victor-timing-function	css <transition-timing-function>	ease-in-out	transition timing function
--victor-filter	css <filter>	custom brush	path filter

Register Options

Name	Type	Default	Description
tagName	{String}	img-victor	Change tag name of the web component
worker	{Worker}	LSD worker	The worker plugin. 1. Write your own worker.js like: onmessage({ data:ImageData }) => postMessage([, groupOfLines]) 2. Using a faster version LSD worker, example can be found in index.html Notice: you need to bundle and serve fastWorker.js and fastWorker.wasm.
poolSize	{Number}	2	Worker pool size

Development

1. Install dependencies

   npm install

2. Install emcc

   emscripten.org

3. Build worker

   npm run build:all

4. Start dev server

   npm run dev

5. Put images under ./demo/img, replace image URL in index.html

6. Open localhost:3000 in browser

References

The LSD worker in this component is compiled from the C version of LSD: a Line Segment Detector Rafael Grompone von Gioi, Jérémie Jakubowicz, Jean-Michel Morel, Gregory Randall by Emscripten.

License

MIT