type RgbColorData = { r: number; g: number; b: number; a?: number; }; declare namespace RgbColorData { function toString(c: RgbColorData): string; } type RgbColorCounter = RgbColorData & { a: number; n: number; }; type ColorCounts = RgbColorCounter[]; declare class RgbColor implements RgbColorData { r: number; g: number; b: number; a: number; /** * If the `a` value is below this value, a color is considered invisible. */ static readonly MINIMUM_A = 13; constructor(r?: number, g?: number, b?: number, a?: number); static fromRgbColorData(c: RgbColorData): RgbColor; static createRandomColor(): RgbColor; static fromPixelArray(pixelData: ArrayLike, pixelIndex: number, isRgba?: boolean): RgbColor; static fromHex(hex: string): RgbColor; static buildColorAverage(counter: RgbColorCounter): RgbColor; isInvisible(): boolean; hasOpacity(): boolean; setFromColorCounts(counter: RgbColorCounter): void; randomize(): void; setFromPixelArray(pixelData: ArrayLike, pixelIndex: number, isRgba?: boolean): void; get [Symbol.toStringTag](): string; calculateDistanceToPixelInArray(pixelData: ArrayLike, pixelIndex: number, isRgba?: boolean): number; equals(color: RgbColorData): boolean; toCssColor(): string; toCssColorHex(): `#${number}`; toInt32(): number; } type ColorQuantizeFunction = (image: ImageData, numberOfColors: number) => RgbColorData[]; declare enum ColorDistanceBuffering { OFF = "off", ON = "on", REASONABLE = "reasonable" } type ImageColorIndex = number[][]; declare class ColorIndex { rows: ImageColorIndex; palette: RgbColor[]; options: Options; verbose: boolean; constructor(imageData: ImageData, options: Options, quantizeFunction: ColorQuantizeFunction); /** * @param imageData * @returns */ protected buildPalette(imageData: ImageData, quantizeFunction: ColorQuantizeFunction): RgbColor[]; /** * Using a form of k-means clustering repeated options.colorClusteringCycles times. http://en.wikipedia.org/wiki/Color_quantization * * * @param imageData * @returns */ protected buildColorData(imageData: ImageData, palette: RgbColor[]): ImageColorIndex; protected runClusteringCycle(imageData: ImageData, palette: RgbColor[], isLastCycle: boolean): ImageColorIndex; protected colorIndexesEqual(i1: ImageColorIndex, i2: ImageColorIndex): boolean; protected adjustPaletteToColorAverages(palette: RgbColor[], colorCounters: ColorCounts, numPixels: number, isLastCycle: boolean): void; /** * Maps each pixel in the image to the palette index of the closest color. * * @param imageData * @param palette * @returns */ protected buildImageColorIndex(imageData: ImageData, palette: RgbColor[]): ImageColorIndex; protected buildImageColorIndexUnbuffered(imageData: ImageData, palette: RgbColor[]): ImageColorIndex; protected buildImageColorIndexBuffered(imageData: ImageData, palette: RgbColor[]): ImageColorIndex; protected getPixelColorId(imageData: ImageData, pixelOffset: number): number; protected initColorIndexArray(imgWidth: number, imgHeight: number): ImageColorIndex; protected buildColorCounts(imageData: ImageData, imageColorIndex: ImageColorIndex, numberOfColors: number): ColorCounts; protected initColorCounts(numberOfColors: number): ColorCounts; /** * find closest color from palette by measuring (rectilinear) color distance between this pixel and all palette colors * @param palette * @param color * @param pixelOffset * @returns */ protected findClosestPaletteColorIx(imageData: ImageData, pixelOffset: number, palette: RgbColor[]): number; } type BoundingBox = [number, number, number, number]; interface SvgLineBaseAttributes { type: string; x1: number; y1: number; x2: number; y2: number; } interface SvgLineAttributesL extends SvgLineBaseAttributes { type: 'L'; } interface SvgLineAttributesQ extends SvgLineBaseAttributes { type: 'Q'; x3: number; y3: number; } type SvgLineAttributes = SvgLineAttributesL | SvgLineAttributesQ; declare namespace SvgLineAttributes { function toString(la: SvgLineAttributes): string; } interface ImageDrawer { /** * Convert traced data to an image. * * @param traceData */ draw(traceData: TraceData): OutputType; } type TraceData = { colors: RgbColor[]; areasByColor: OutlinedArea[][]; width: number; height: number; }; declare namespace TraceData { function toString(td: TraceData): string; } interface AreaData { boundingBox: BoundingBox; childHoles: number[]; isHole: boolean; } interface OutlinedArea extends AreaData { lineAttributes: SvgLineAttributes[]; } declare class ImageTracer { protected options: Options; protected colorQuantizeFunction: ColorQuantizeFunction; constructor(options?: Partial | null); /** * Set a custom color quantize function. */ setColorQuantizeFunction(fun: ColorQuantizeFunction): this; /** * Trace image data and render to SVG * * @param imageData * @returns */ traceImageToSvg(imageData: ImageData): string; /** * Allows to draw traced image with a custom renderer. * * @param imageData * @param drawer * @returns */ traceImage(imageData: ImageData, drawer?: ImageDrawer | null): OutputType | string; protected isVerbose(): boolean; protected preProcessImage(imageData: ImageData): ImageData; protected imageDataToTraceData(imageData: ImageData, colorIndex: ColorIndex): TraceData; protected imageDataToTraceDataWithSequentialLayering(imageData: ImageData, colorIndex: ColorIndex): TraceData; protected imageDataToTraceDataWithParallelLayering(imageData: ImageData, colorIndex: ColorIndex): TraceData; } declare enum InterpolationMode { OFF = "off", INTERPOLATE = "interpolate" } declare enum TrimMode { OFF = "off", KEEP_RATIO = "ratio", ALL = "all" } declare enum FillStyle { FILL = "fill", STROKE = "stroke", STROKE_FILL = "stroke+fill" } interface SvgDrawerOptions { /** * Stroke width written to SVG path. */ strokeWidth: number; /** * Do not draw lines (areas with less than 3 points). */ lineFilter: boolean; /** * Multiply all coordinates by this number. */ scale: number; /** * Number of decimal places in svg values */ decimalPlaces: number; /** * If enabled, the viewBox attribute will be set on the SVG tag element. */ viewBox: boolean; /** * Enables control output, draws white dots with given radius at segment borders. */ segmentEndpointRadius: number; /** * Enables control output, draws curve control points as cyan dots with given radius. */ curveControlPointRadius: number; /** * Stroke, fill, or stroke + fill */ fillStyle: FillStyle; /** * Removes empty border from the image. */ trim: TrimMode; desc: boolean; verbose?: boolean; } declare const SvgDrawerDefaultOptions: SvgDrawerOptions; declare enum CreatePaletteMode { GENERATE = "generate", SAMPLE = "sample", SCAN = "scan", PALETTE = "palette" } declare enum LayeringMode { SEQUENTIAL = 1, PARALLEL = 2 } interface BaseOptions { /** * Line tracer error margin. * Gives the squared maximum distance a point can be off a trajectory to be * still put on a line. * * Default: 1 */ lineErrorMargin: number; /** * Curve tracer error margin. * Gives the squared maximum distance a point can be off a trajectory to be * still put on a curve. * * Default: 1 */ curveErrorMargin: number; /** * Sets interpolation mode. */ interpolation: InterpolationMode; /** * Do not interpolate right angles. * * A right angle consists of five points on an outline: the corner point * and two adjacent edge points in either direction. * * Default: true */ enhanceRightAngles: boolean; /** * Areas on the image with an outline of less than the given number of * points will be discarded. */ minShapeOutline: number; /** * CreatePaletteMode.GENERATE: Generate colors along the spectrum independent of image colors. * CreatePaletteMode.SAMPLE: Randomly access image for colors. * CreatePaletteMode.SCAN: Step through the image along a raster. */ colorSamplingMode: CreatePaletteMode; /** * Use custom palette */ palette?: RgbColorData[] | null; /** * Number of colors in the palette. * * CreatePaletteMode.GENERATE: * - uses grayscale if less than 8 colors * - otherwise number of points on color cube * * CreatePaletteMode.SAMPLE: * - number of random samples (can give same color) * * CreatePaletteMode.SCAN: * - defines step width of scanner * - stop scanning when given number of colors are found * * Colors will be adjusted during color clustering. * * Default: 16 */ numberOfColors: number; /** * Number of color clustering cycles. */ colorClusteringCycles: number; /** * Buffers color distances during clustering. * * Buffering is very efficient when working with larger palettes sizes * (more than 30 colors). On smaller palettes, building the buffer is more * expensive than what is saved. * The number of distinct colors in the image determines the buffer size * and number of skipped calculations. * * Unless buffering causes issues, the default setting of `reasonable * should be fine. */ colorDistanceBuffering: ColorDistanceBuffering; /** * Threshold for color pruning during color clustering. * * If ratio between pixels of a color and all pixels is below the given * number, the color will be replaced by a random color. */ minColorQuota: number; /** * Used for old debug output. */ layeringMode: LayeringMode; /** * Disabled below 1, capped at 5 */ blurRadius: number; /** * Maximum allowed difference between original pixel and blurred pixel when summing up RGBA values. * If a blurred pixel exceeds delta, the original pixel is used instead. */ blurDelta: number; /** * Sharpen pixels */ sharpen: boolean; /** * Maximum allowed difference between original pixel and sharpened pixel when summing up RGBA values. * If a sharpened pixel exceeds threshold, the original pixel is used instead. */ sharpenThreshold: number; layerContainerId?: string; /** * Write status data to console during trace. */ verbose?: boolean; } interface Options extends BaseOptions, SvgDrawerOptions { } declare namespace Options { /** * Create full options object from partial */ function buildFrom(options: Partial | null): Options; const Presets: Readonly<{ default: Options; posterized1: { colorSamplingMode: CreatePaletteMode.GENERATE; numberOfColors: number; }; posterized2: { numberOfColors: number; blurRadius: number; }; curvy: { lineErrorMargin: number; lineFilter: true; enhanceRightAngles: false; }; sharp: { curveErrorMargin: number; lineFilter: false; }; detailed: { minShapeOutline: number; decimalPlaces: number; lineErrorMargin: number; curveErrorMargin: number; numberOfColors: number; }; smoothed: { blurRadius: number; blurDelta: number; }; grayscale: { colorSamplingMode: CreatePaletteMode.GENERATE; colorClusteringCycles: number; numberOfColors: number; }; fixedpalette: { colorSamplingMode: CreatePaletteMode.GENERATE; colorClusteringCycles: number; numberOfColors: number; }; randomsampling1: { colorSamplingMode: CreatePaletteMode.SAMPLE; numberOfColors: number; }; randomsampling2: { colorSamplingMode: CreatePaletteMode.SAMPLE; numberOfColors: number; }; artistic1: { colorSamplingMode: CreatePaletteMode.GENERATE; colorClusteringCycles: number; minShapeOutline: number; blurRadius: number; blurDelta: number; lineErrorMargin: number; lineFilter: true; numberOfColors: number; strokeWidth: number; }; artistic2: { curveErrorMargin: number; colorSamplingMode: CreatePaletteMode.GENERATE; colorClusteringCycles: number; numberOfColors: number; strokeWidth: number; }; artistic3: { curveErrorMargin: number; lineErrorMargin: number; numberOfColors: number; }; artistic4: { curveErrorMargin: number; lineErrorMargin: number; numberOfColors: number; blurRadius: number; blurDelta: number; strokeWidth: number; }; posterized3: { lineErrorMargin: number; curveErrorMargin: number; minShapeOutline: number; enhanceRightAngles: true; colorSamplingMode: CreatePaletteMode.GENERATE; numberOfColors: number; minColorQuota: number; colorClusteringCycles: number; blurRadius: number; blurDelta: number; strokeWidth: number; lineFilter: false; decimalPlaces: number; palette: { r: number; g: number; b: number; a: number; }[]; }; }>; } declare class SvgDrawer implements ImageDrawer { protected readonly options: SvgDrawerOptions; protected readonly useStroke: boolean; protected readonly useFill: boolean; constructor(options: Partial); protected fixValue(val: number): number | string; draw(traceData: TraceData): string; init(traceData: TraceData): void; /** * Builds a tag for each segment. * * @param traceData * @param colorId * @param segmentIx * @returns */ protected buildSegmentTags(traceData: TraceData, colorId: number, segmentIx: number): string[]; protected isValidLine(color: RgbColor, lineAttributes: SvgLineAttributes[]): boolean; protected getDescriptionAttribute(traceData: TraceData, colorId: number, segmentIx: number): string; protected buildPath(segment: OutlinedArea, colorSegments: OutlinedArea[]): string; protected drawControlOutput(segment: OutlinedArea, colorSegments: OutlinedArea[]): string[]; protected drawControlPoint(segment: OutlinedArea): string[]; protected buildSvgTag(traceData: TraceData, tags: string[]): string; protected buildPathTag(area: OutlinedArea, colorSegments: OutlinedArea[], color: RgbColor, desc?: string): string; protected buildCircleTag(x: number, y: number, r: number, fill: string): string; protected buildLineTag(x1: number, y1: number, x2: number, y2: number, color: string, strokeWidth: number): string; buildColorAttributes(c: RgbColor, area: OutlinedArea): string; protected colorToRgbString(color: RgbColorData): string; } export { BaseOptions, CreatePaletteMode, FillStyle, ImageDrawer, ImageTracer, InterpolationMode, LayeringMode, Options, RgbColor, RgbColorData, SvgDrawer, SvgDrawerDefaultOptions, SvgDrawerOptions, TraceData, TrimMode };