A javascript port of Peter Selinger's [Potrace](http://potrace.sourceforge.net). Based on [kilobtye's JS port](https://github.com/kilobtye/potrace)
npm install potrace-plus![]()
, or
blob or file objects
html
`
Call potrace in asynchronous function.
`js
(async()=>{
let traced = await PotracePlus(imgPreview);
// retrieve all data
let { svg, svgSplit, d, width, height, commands, pathData, pdf } = traced;
})();
`
#### ESM
`js
import {PotracePlus} from './dist/potrace-plus.esm.min.js
(async()=>{
let traced = await PotracePlus(imgPreview);
})();
`
The potrace object contains all relevant data:
* SVG markup for self-contained file – split and single compound path
* SVG path markup
* SVG 2 pathData array – optimized and normalized (all absolute)
* width and height
* command count
You can also use these methods
`js
// Get the SVG markup for compound or split paths
traced.getSVG(split=false)
// Get stringified path data - as d attribute
traced.getD()
// Get path data array
traced.getPathData()
traced.getPathDataNorm()
`
Options
`js
let options = {
/**
* Potrace options
* See: https://pythonhosted.org/pypotrace/ref.html
*/
turnpolicy : "majority",
turdsize : 1,
optcurve : true,
alphamax : 1,
opttolerance : 1,
// size adjustments
minSize : 1000,
maxSize : 5000,
scale : 1,
//filters
brightness : 1,
contrast : 1,
invert : 0,
blur=0,
// svg processing
crop : true,
optimize = true,
// add width and height attribute to SVG
addDimensions : true,
// SVG optimization
toRelative : true,
toShorthands : true,
decimals : 3
// get unoptimized polygon
getPolygon = true,
// get PDF data
getPDF = true
}
let traced = await PotracePlus(imgPreview, options);
`
$3
Paths and Subpaths are sorted in a more logical order from top-left to bottom right. This is foremost handy for manual editing the output in a graphic editor.
$3
By default the tracing object contains
* traced.svg a concatenated SVG file - all shapes are merged into a single path
* traced.svgSplit a SVG with individual elements for each "logical" shape group
For instance a text-like object "Pot" would return a path for "P", "o" (keeping the compound inner shape intact) and "t".
Bear in mind:
* this method is not perfect and can only group overlapping shapes – a shape like "i" will be separated to the vertical stem and the dot
* when aiming at the most compact SVG output , you should prefer the concatenated output as it significantly reduces the document overhead
$3
Will remove colinear commands and reduce file-size.
By default Potrace-plus return relative commands and applies shorthands where possible.
In case you encounter issues, you can disable it via option:
`js
let traced = await PotracePlus(img,
{
optimize:false,
toRelative : false,
toShorthands : false,
decimals : 3
}
);
`
If you need to process the pathdata in a normalized format you can also acces this unoptimized pathdata via the traced.pathDataArr containing all commands in absolute coordinates – split into sub path chunks.
$3
In case you encounter any issues you can try to use the previous version.
See all version on npm.
Analogous you can switch to previous versions for cdn links like so
`
`
to
`
``