Skip to content
/ img-victor Public

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

License

Notifications You must be signed in to change notification settings

9am/img-victor

Repository files navigation

img-victor

<img-victor>

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

GitHub npm npm bundle size

Demo

img-victor-demo-manual

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published