Simple raster image tracer and vectorizer written in TypeScript.
npm install imagetracersh
$ npm install imagetracer
`
👽 Usage
`js
import { imageTracer } from 'imagetracer'
const svg = imageTracer.imageToSVG(imageUrl)
`
API
| Function name | Arguments | Returns | Run type |
| -------------------------- | ------------------------------------------------------ | -------------------- | ------------------------------ |
| `imageToSVG` | url: string, options: ImageTracerOptionsParamers | Promise | Asynchronous, Browser only |
| `imageDataToSVG` | imgd: ImageData, options: ImageTracerOptionsParamers | string | Synchronous, Browser & Node.js |
| `imageToTracedata` | url: string, options: ImageTracerOptionsParamers | Promise | Asynchronous, Browser only |
| `imageDataToTracedata` | imgd: ImageData, options: ImageTracerOptionsParamers | Tracedata | Synchronous, Browser & Node.js |
`imagedata` is standard ImageData here, `canvas` is canvas .
$3
| Function name | Arguments | Returns | Run type |
| --------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------- |
| `appendSVGString` | svgstr: string, parentid: string | Nothing, an SVG will be appended to the container DOM element with id=parentid. | Synchronous, Browser only |
| `loadImage` | url: string, options: MaybeImageTracerOptions | Promise | Asynchronous, Browser only |
| `getImgdata` | canvas: HTMLCanvasElement | ImageData | Synchronous, Browser only |
There are more functions for advanced users, read the source if you are interested. :)
"Browser only" means that Node.js doesn't have built-in canvas and DOM support as of 2018, so loading an image to an ImageData object needs an external library.
Options
You can use an option preset name (string) or an options object to control the tracing and rendering process.
!Option presets gallery
These strings can be passed instead of the options object:
`'default'`
`'posterized1'`
`'posterized2'`
`'posterized3'`
`'curvy'`
`'sharp'`
`'detailed'`
`'smoothed'`
`'grayscale'`
`'fixedpalette'`
`'randomsampling1'`
`'randomsampling2'`
`'artistic1'`
`'artistic2'`
`'artistic3'`
`'artistic4'``