Skip to main content
upload · convert · copy the code

Example Apps

All Docs

One conversion pipeline - filter, segment, trace - run from every binding. The browser apps are live: upload a raster image, get an SVG back, and see the exact code that did it. The console apps run the same pipeline from the command line in C, C++, Python, and JavaScript. Pick whichever matches your stack and copy it as a starting point.

React

React color-by-number demo

example-apps/react-js

Full interactive demo, bundled with Vite - the setup most web apps use.

import { imageToUint8ClampedArray, imageToSvg } from "img2num";

const { pixels, width, height } = await imageToUint8ClampedArray(file);
const { svg } = await imageToSvg({ pixels, width, height });

Open live demo

ESM

HTML + ES Modules

example-apps/html-js

The browser ESM build loaded natively. No bundler, no build step.

<script type="module">
  import { imageToUint8ClampedArray, imageToSvg }
    from "https://cdn.jsdelivr.net/npm/img2num/dist/browser/img2num.js";
  // ...
</script>

Open live demo

IIFE

One plain script tag, one global object. The simplest integration.

<script src="https://cdn.jsdelivr.net/npm/img2num/dist/standalone/img2num.iife.js"></script>
<script>
  const { imageToUint8ClampedArray, imageToSvg } = Img2Num;
  // ...
</script>

Open live demo

UMD

HTML + UMD (RequireJS)

example-apps/html-js

Loaded as an AMD module - nothing is added to the global scope.

requirejs.config({ paths: { img2num: ".../dist/standalone/img2num.umd" } });
requirejs(["img2num"], ({ imageToUint8ClampedArray, imageToSvg }) => {
  // ...
});

Open live demo

Node ESM

The same WASM build in Node.js: decode with sharp, convert with imageToSvg.

import { imageToSvg } from "img2num";
import sharp from "sharp";

const { data, info } = await sharp(imagePath).ensureAlpha().raw()
  .toBuffer({ resolveWithObject: true });
const { svg } = await imageToSvg({ pixels: new Uint8ClampedArray(data.buffer), ...info });

img2num on npm

Node CJS

Identical to the ESM app, consumed with require() from CommonJS.

const { imageToSvg } = require("img2num");
const sharp = require("sharp");
// ... decode, then:
const { svg } = await imageToSvg({ pixels, width, height });

img2num on npm

Python

OpenCV image in, SVG out with numpy zero-copy.

import img2num

cfg = img2num.ImageToSvgConfig(kmeans={"k": 64}, min_thickness=10)
svg = img2num.image_to_svg(img, config=cfg)

img2num on PyPI

C++17

The native core: step-by-step pipeline and the unified call.

img2num::ImageToSvgConfig config;
config.kmeans.k = 32;
std::string svg {img2num::image_to_svg(img_data, width, height, config)};

Source on GitHub

C

The C bindings with stb_image: filter, k-means, SVG output.

img2num_ImageToSvgConfig cfg = img2num_ImageToSvgConfig_default();
char* svg = img2num_image_to_svg(image_data, width, height, &cfg);

Source on GitHub


Each browser example page shows its complete code, and the plain-HTML apps are fully standalone - use your browser's View Source to see the whole page. All example source and build setup lives in example-apps/ on GitHub.