In-Browser Vectorization Architecture

How C2Vector synthesizes camera photographs into high-precision, infinitely scalable vector artwork and master print-ready PDF suites locally inside browser Web Workers.

Launch C2Vector Read Source on GitHub
1

Bicubic HD Resampling & Bilateral Denoising

Resolution Normalization • Pre-Filter Pipeline

Consumer smartphone photos and web images present varying aspect ratios, ISO sensor noise, and compression artifacts. In Step 1, the image is ingested onto an offscreen canvas and mapped through a high-precision bicubic interpolation kernel with a target dimension of 1856×2048px (or proportional HD bounds).

Bicubic Interpolation Kernel

Interpolates across a 16-pixel neighborhood using cubic Hermite splines. Avoids jagged nearest-neighbor steps and prevents blurring associated with standard bilinear passes.

Bilateral Filter Denoising

Applies edge-preserving spatial and photometric range Gaussian weights. Flattens micro-texture in background regions while retaining sharp optical boundaries.

2

Multi-Tonal Decomposition & Stencil Synthesis

Otsu Binarization • Positive/Negative Plates • Island Bridging

To support manufacturing applications (laser engraving, CNC plasma cutting, silkscreen printing, vinyl plotting), the image is decomposed into discrete tonal layers across multiple density thresholds.

Otsu Variance Optimization

Calculates the optimal global threshold t* maximizing inter-class luminance variance σB²(t) between foreground and background pixels, generating an authentic 1-bit monochrome mask.

Bridge-Connected Laser Stencil

Detects closed vector loops ("islands" and "counter-spaces") using connected-component analysis and automatically introduces structural connection bridges so cut pieces stay physically attached.

3

Sub-Pixel Canny & Focus Depth Outlines

Gradient Sobel • Non-Maximum Suppression • Dual Hysteresis

Crisp vector artwork requires clear anatomical and focal boundaries. Step 3 executes a Canny edge detector in pure JavaScript inside the Web Worker to isolate structural contours at single-pixel width.

Non-Maximum Suppression (NMS)

Computes gradient vectors (Gx, Gy) and magnitude M = √(Gx² + Gy²). Thins thick edges by suppressing any gradient value that is not a local maximum along the gradient direction.

Dual-Threshold Hysteresis

Categorizes pixels into strong (M ≥ Thigh) and weak (Tlow ≤ M < Thigh) edges. Traces edge paths recursively, keeping weak pixels only if topologically connected to strong ridges.

4

Perceptual CIELAB Quantization & Tone Match Index

CIE L*a*b* ΔE • Median Cut • Pearson Correlation Calibration

Converting true-color continuous-tone photography into vector regions demands perceptually uniform color clustering. Human vision is non-linear and significantly more sensitive to luminance shifts than hue changes.

CIELAB Uniform Color Space

RGB pixels are transformed into device-independent CIE XYZ and then into L*a*b*. Euclidean distance ΔE = √(ΔL*² + Δa*² + Δb*²) reflects true perceived visual distance.

Tone Match Index (TMI ≥ 0.98)

Computes the Pearson correlation coefficient r = cov(X, Y) / (σX σY) between the quantized plate and the original photo, proving zero tonal distortion.

5

Continuous Cubic Bézier Tracing & Chromatic Glaze

Potrace Path Tracer • Tangent Continuity • Real-Time Opacity Glaze

Quantized raster boundaries are converted into mathematical spline paths. Raster pixels are traced into closed vector polygons, simplified using the Douglas-Peucker algorithm, and fitted with smooth cubic Bézier curves: C(t) = (1−t)³P0 + 3(1−t)²tP1 + 3(1−t)t²P2 + t³P3.

Continuous G¹ Curve Continuity

Aligns tangent vectors at path junctions to eliminate sharp staircase artifacts while preserving sharp corners when the angular change exceeds the corner threshold αcorner > 60°.

Chromatic Edge Glaze Control

Structural edge contours are layered with adjustable opacity (0% to 100%) sampled directly from surrounding color planes, providing a luminous, hand-drafted lithograph aesthetic rather than flat black outlines.

6

12-Page Master Vector PDF Suite & Multi-Format Export

Client-Side jsPDF • svg2pdf • Offscreen Canvas 4x Rasterization

The output is compiled into an industry-standard 12-page vector PDF suite and multi-scale SVG artboards directly in the client browser with zero server roundtrips.

True Scalable Vector PDF

Uses svg2pdf.js and jsPDF to parse SVG DOM trees into native PDF vector operators (m, c, f, S). Files scale infinitely in Adobe Illustrator and CAD plotters.

Offscreen Canvas PNG Exporter

As a secondary raster convenience, vector paths are drawn onto an in-memory OffscreenCanvas at 1x, 2x, or 4x (300 DPI print) resolutions with instant zero-overhead PNG blob downloads.

Ready to vectorise your photo?

Process any photograph locally on your phone or desktop. 100% free, private, and offline capable.

Open C2Vector