<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 ```js import { register } from '@9am/img-victor'; register({/* options */}) // html ``` ## 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 \|`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 `|`3200ms`|transition duration| |`--victor-timing-function`|`css `|`ease-in-out`|transition timing function| |`--victor-filter`|`css `|`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](https://emscripten.org/docs/getting_started/downloads.html) 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](http://www.ipol.im/pub/art/2012/gjmr-lsd/) by [Emscripten](https://emscripten.org/index.html). ## License [MIT](LICENSE)