foo123 / img2svg

Vectorize Image Data to SVG using potrace algorithm with color

img2svg

Vectorize Image Data to SVG using potrace algorithm v.1.16 with color

version 1.0.0 (17 kB minified)

demo in nodejs with CanvasLite:

const CanvasLite = require('./CanvasLite.js');
const img2svg = require('../build/img2svg.js');
const img = new CanvasLite.Image(), canvas = new CanvasLite();
img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0);
    const imgData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height);
    console.log(img2svg(imgData, {mode:"color",depth:5,turdsize:0,minpathsegments:2}));
};
img.src = __dirname + '/test.jpeg';

demo in browser:

function el(html)
{
    const container = document.createElement('div');
    container.innerHTML = html;
    return container.firstChild;
}
const img = new Image(), canvas = document.createElement('canvas');
img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0);
    const imgData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height);
    const svg = img2svg(imgData, {mode:"color",depth:5,turdsize:0,minpathsegments:2});
    document.body.appendChild(img);
    document.body.appendChild(el(svg));
};
img.src = './test.jpeg';

Result:

Options:

• mode: "hue" | "gray" (for grayscale images) | "color" (default)
• depth: depth of color quantization (default 2)
• depthR,depthG,depthB,depthA: depth per separate image channel (default depth)

POTRACE Options:

• connectedcomponents: (separate disconnected paths) true (default)
• minpathsegments: (minimum number of path points) 2 (default)
• turnpolicy: "left" | "right" | "black" | "white" | "majority" | "minority" (default)
• turdsize: (minimum area to trace) 2 (default)
• alphamax: (balance between more curves vs more corners) 1 (default)
• optcurve: (generate optimum curves) true (default)
• opttolerance: (tolerance for optimum curves) 0.2 (default)

see also:

• CanvasLite an html canvas implementation in pure JavaScript
• Rasterizer stroke and fill lines, rectangles, curves and paths, without canvaσ
• Gradient create linear, radial, conic and elliptic gradients and image patterns without canvas
• Geometrize Computational Geometry and Rendering Library for JavaScript
• Plot.js simple and small library which can plot graphs of functions and various simple charts and can render to Canvas, SVG and plain HTML
• MOD3 3D Modifier Library in JavaScript
• HAAR.js image feature detection based on Haar Cascades in JavaScript (Viola-Jones-Lienhart et al Algorithm)
• HAARPHP image feature detection based on Haar Cascades in PHP (Viola-Jones-Lienhart et al Algorithm)
• FILTER.js video and image processing and computer vision Library in pure JavaScript (browser and node)
• css-color simple class to parse and manipulate colors in various formats
• img2svg vectorize image data to svg
• svg2json parse svg to json