imagetracerjs

ImageTracerJS converts raster images to vector graphics through a multi-step pipeline. Understanding this process can help you troubleshoot unexpected results or optimize your input images:

1. Color Quantization: The colorquantization function reduces the image to an indexed color set using a K-means or K-medians clustering variant.
2. Layer Separation & Edge Detection: The layering function separates colors into arrays and calculates edge node types (using a variant of the Marching Squares algorithm).
3. Pathscan: The pathscan function identifies chains of edge nodes to form paths.
4. Interpolation: The internodes function interpolates edge node coordinates, assigning one of 8 directions (E, NE, N, NW, W, SW, S, SE) to each segment.
5. Tracing:
   • tracepath splits interpolated paths into directional sequences.
   • fitseq attempts to fit straight lines or quadratic splines to these sequences. If the error exceeds the defined threshold, it uses a divide-and-conquer approach to split the sequence and recursively fit smaller segments.
6. SVG Rendering: The getsvgstring function converts the final coordinates into SVG Path data.

ImageTracerjs provides several built-in presets to achieve specific visual styles without manually configuring every parameter. Common presets include:

• posterized1: Low color count (2 colors), no sampling.
• curvy: High precision for curves (ltres: 0.01) with line filtering.
• sharp: High precision for quadratic splines (qtres: 0.01).
• detailed: High color count (64) and high coordinate precision.
• smoothed: Uses Gaussian blur preprocessing.
• grayscale: Generates a 7-color grayscale palette.
• artistic1 through artistic4: Various stylized settings varying in blur, stroke width, and color complexity.

// Example of the structure of available presets
this.optionpresets = {
	'default': {
		// Tracing
		corsenabled : false,
		ltres : 1,
		qtres : 1,
		pathomit : 8,
		rightangleenhance : true,
		// ... other defaults
	},
	'posterized1': { colorsampling:0, numberofcolors:2 },
	'curvy': { ltres:0.01, linefilter:true, rightangleenhance:false },
	'sharp': { qtres:0.01, linefilter:false },
	'detailed': { pathomit:0, roundcoords:2, ltres:0.5, qtres:0.5, numberofcolors:64 },
	'smoothed': { blurradius:5, blurdelta: 64 },
	'grayscale': { colorsampling:0, colorquantcycles:1, numberofcolors:7 },
	// ... more presets
};

Instead of manually configuring every parameter, you can pass a string representing a predefined preset to the options argument of any API method. The library will use the settings from that preset and fill in any missing values with the default settings.

Available Presets:

• 'default': Standard tracing settings.
• 'posterized1': Low color count (2 colors).
• 'posterized2': Low color count (4 colors) with blur.
• 'curvy': Smooth lines, no right-angle enhancement.
• 'sharp': High precision for quadratic splines.
• 'detailed': High path detail and color count.
• 'smoothed': High blur for a soft look.
• 'grayscale': Grayscale output.
• 'fixedpalette': Uses a fixed number of colors.
• 'randomsampling1': Random color sampling (8 colors).
• 'randomsampling2': Random color sampling (64 colors).
• 'artistic1': Artistic style with blur and specific line settings.
• 'artistic2': Artistic style with very few colors.
• 'artistic3': Artistic style with high error tolerance.
• 'artistic4': Artistic style with high detail and blur.
• 'posterized3': Specific posterized look with a custom palette.