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.htmlNotice: 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