Skip to main content
Version: Next

Img2Num JavaScript

A high-performance raster-to-vector conversion library that transforms images into SVGs. It is powered by WebAssembly (WASM) for speed, while providing easy-to-use JavaScript wrappers for integration into web or Node.js projects.

Features​

  • Fast raster vectorization with WASM backend.
  • Typed array support: Works with Uint8Array, Uint8ClampedArray, and Int32Array.
  • String outputs: Converts results directly into SVG strings.
  • Worker-friendly: Supports offloading heavy computations to Web Workers.
  • Zero dependencies: Pure WASM + JS with no external libraries required.

Requirements​

Node.js (server-side)​

  • Node ≥ 14 is required for ESM support ("type": "module" in package.json).
  • Node ≥ 16 is recommended if you want top-level await and best WASM performance.

Browser (client-side)​

  • A modern browser with ES module support (<script type="module">) and WebAssembly support.
  • Most browsers from 2020+ are compatible.
  • Not supported: Internet Explorer 11 or older browsers.

Files and Bundlers​

  • When using bundlers (Webpack, Vite, Rollup), ensure that .wasm files (like Img2Num's build-wasm/index.wasm) are properly served or imported.
  • No external JS dependencies are required — the package is pure JS + WASM.

Installation​

Using a package manager​

Run this in your terminal
npm install img2num

Using the jsDelivr CDN​

Paste this in your HTML file
<script type="module">
  import { imageToUint8ClampedArray, bilateralFilter, kmeans, findContours } from "https://cdn.jsdelivr.net/npm/img2num/build-wasm/index.js";

  // Your code here
</script>

Usage​

Basic Usage​

This example mirrors that of the React example app.

Convert an image to an SVG
import {
  imageToUint8ClampedArray,
  bilateralFilter,
  kmeans,
  findContours
} from "img2num";

// Get your image from somewhere, e.g. a File from an <input> element:
const imageFile = /* File object, e.g., input.files[0] */;

// Convert image to a Uint8ClampedArray
const { pixels, width, height } = await imageToUint8ClampedArray(imageFile);

// Reduce noise with a bilateral filter
const filtered = await bilateralFilter({
  pixels,
  width,
  height,
});

// Label the image using K-Means (labels needed for next step)
const { labels } = await kmeans({
  pixels: filtered,
  width,
  height,
  num_colors: 16,
});

// Convert image to SVG
const { svg } = await findContours({
  pixels: filtered,
  labels,
  width,
  height,
});

Resources​

License​

The JavaScript package is licensed under the following: