Socket
Socket
Sign inDemoInstall

@image-tracer-ts/core

Package Overview
Dependencies
0
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@image-tracer-ts/core

Convert image bitmaps into SVG by tracing outlines. Typescript version of imagetracerjs. Use imagetracerts-nodejs or imagetracerts-browser for platform-specific file input and output.


Version published
Maintainers
1
Weekly downloads
9
decreased by-10%

Weekly downloads

Readme

Source

@image-tracer-ts/core

Trace images into SVG.

alt Bitmap to Svg

Typescript reimplementation of imagetracer-js.

Provides ESM and CJS packages.

The core package only works with ImageData, use @image-tracer-ts/browser or @image-tracer-ts/nodejs to trace different image formats (like PNG, JPEG, etc) from different sources (files, buffers, URLs, etc).


Basic Usage

import { ImageTracer, Options } from '@image-tracer/core';
const options: Partial<Options> = {fillStyle: 'stroke'}
const tracer = new ImageTracer(options)
const svgString = tracer.traceImage(imageData, drawer)

Options

Tracing happens in four steps, each comes with several configuration options. Pass them in a configuration object, or as command line parameter, prefixed with -- (i.e. --blurRadius 5).

Step 1: Image preprocessing

Optional steps to adjust image before processing.

OptionTypeDefaultDescription
blurRadiusnumber (between 0 and 5)0 (off)Number of pixels (in each direction) to calculate the blurred pixel value from.
blurDeltanumber (0 - 4*255)20Maximum allowed difference between original pixel and blurred pixel when summing up RGBA values. If a blurred pixel exceeds delta, the original pixel is used instead.
sharpenbooleanfalseUse sharpen filter
sharpenThresholdnumber (0 - 4*255)20Maximum allowed difference between original pixel and sharpened pixel when summing up RGBA values. If a sharpened pixel exceeds threshold, the original pixel is used instead.
Step 2: Building a color index

Create a base palette and apply clustering to the pixels in the image to build color layer masks.

OptionTypeDefaultDescription
colorSamplingModegenerate | sample | scan | palettescanSelect how internal palette will be generated:
  • generate: Generate colors along the spectrum independent of image colors. Builds a grayscale palette if less than 8 colors are requested.
  • sample: Randomly access image for colors.
  • scan: Step through the image along a raster.
  • palette: Manually supply colors.
paletteArray<{r:number, g:number, b:number, a?:number}>nullArray of colors to use with colorSamplingMode=palette
numberOfColorsnumber16Number of colors to be generated.
colorClusteringCyclesnumber3Number of color clustering cycles.
colorDistanceBufferingoff | on | reasonablereasonableBuffers color distances during clustering. Very efficient if palette has more than 30 colors.
minColorQuotanumber (between 0 and 1)0 (off)Threshold for color pruning during color clustering. If ratio between pixels of a color and all pixels is below the given number, the color will be replaced by a random color.
Step 3: Tracing

Create vector data from pixels.

OptionTypeDefaultDescription
minShapeOutlinenumber0 (off)Discard traced areas with an outline of less than the given number of points.
interpolationoff | interpolateinterpolateSets interpolation mode.
enhanceRightAnglesbooleantrueDo not interpolate right angles.
lineErrorMarginnumber1Line tracer error margin. Gives the squared maximum distance a point can be off a line trajectory to be still put on it.
curveErrorMarginnumber1Curve tracer error margin. Gives the squared maximum distance a point can be off a curved trajectory to be put on it.
Step 4: Drawing

Create SVG data from vectors.

OptionTypeDefaultDescription
fillStylefill | stroke | stroke+fillstroke+fillSelect how color segments are colored.
strokeWidthnumber1Stroke width written to SVG path.
scalenumber1Multiply all coordinates by this number.
decimalPlacesnumber1Number of decimal places in svg values.
viewBoxbooleantrueIf enabled, the viewBox attribute will be set on the SVG tag element.
trimoff | ratio | alloffRemoves empty border from the image.
lineFilterbooleanfalseDo not draw lines (areas with less than 3 points).
descbooleanfalseWrite a desc attribute to SVG edges with debug output
segmentEndpointRadiusnumber0 (off)Enables control output, draws white dots with given radius at segment borders.
curveControlPointRadiusnumber0 (off)Enables control output, draws curve control points as cyan dots with given radius.
Misc
OptionTypeDefaultDescription
verbosebooleanfalseWrite status data to console during trace.
outstringinput file name + .svgSet output file name (in ImageTracerNodejs)
presetsee preset names belownullUse preset from command line

Named presets

Preset configurations can be imported from the Options object:

import { Options } from '@image-tracer/core';
ImageTracerBrowser.fromUrl<OutputType = string>(url, Options.Presets.posterized1)

From command line, the --preset parameter can be used along with a preset name:

  • default
  • posterized1 posterized2 posterized3
  • curvy
  • sharp
  • detailed
  • smoothed
  • grayscale
  • fixedpalette
  • randomsampling1 randomsampling2
  • artistic1 artistic2 artistic3 artistic4

Collection of example images for each preset


Overriding the SVG Generator

You can provide a custom ImageDrawer to change how output is created from traced data:

const drawer = new CustomizedImageDrawer()
const svgString = new ImageTracer(options).traceImage(imageData, drawer)

Keywords

FAQs

Last updated on 04 Apr 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc