@image-tracer-ts/browser NPM

@image-tracer-ts/browser

Trace images into SVG in the browser.

alt Bitmap to Svg

Adds browser-specific convenience methods to @image-tracer-ts/core to load data from different image types (PNG, JPEG, etc.) and locations (URLs, file objects, etc.).

Provides ESM and CJS packages.

A similar package is available for Node.js in @image-tracer-ts/nodejs.

Basic Usage

import { ImageTracerBrowser, Options } from '@image-tracer/browser';
const options: Partial<Options> = {fillStyle: 'stroke'}
const svgString = ImageTracerBrowser.fromUrl('https://.../image.png', options);

Tracing different source types

Basic syntax for tracing an image by URL:

ImageTracerBrowser.fromUrl<OutputType = string>(
  url: string,
  options: Partial<Options>,
  drawer: ImageDrawer<OutputType> | null = null
 ): Promise<string | OutputType>

Similarly, there is fromBuffer() (for ArrayBuffers), fromFile() (for File objects) and fromImageData() (for ImageData).

Import ImageLoader from @image-tracer/browser to convert sources into ImageData manually.

Passing a custom ImageDrawer as third parameter to the from*() methods allows to change how output is created from traced data.