https://github.com/9am/img-victor

A web component converting <img> to SVG <path> with a drawing effect 🏆
https://github.com/9am/img-victor

animation img lsd webcomponents

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/9am/img-victor
• Owner: 9am
• License: mit
• Created: 2022-03-16T05:53:56.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-23T06:27:49.000Z (over 1 year ago)
• Last Synced: 2024-10-12T18:54:35.431Z (about 1 month ago)
• Topics: animation, img, lsd, webcomponents
• Language: C
• Homepage:
• Size: 107 KB
• Stars: 15
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


	

	
<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)