@9am/img-victor NPM

Demo

ESM

import { register } from '@9am/img-victor';
register({/* options */})

// html
<img-victor src="/img.png"></img-victor>

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`

Name	Type	Default	Description
`--victor-stroke`	css \	`dimgray`	svg path stroke color
`--victor-stroke-width`	css \	`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

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