Image Trace Loader
Loads images and exports traced outlines as image/svg+xml URL-encoded data
Install
npm install --save-dev image-trace-loaderInspiration
I saw Mikael Ainalem's fantastic CodePen showcasing this technique, and I wanted a way to automate the process.
Usage
The image-trace-loader loads your image and exports the url of the image as src and the image/svg+xml URL-encoded data as trace.
;webpack.config.js
moduleexports = module: rules: test: /\.$/i use: loader: 'image-trace-loader' It can also be used in conjunction with url-loader or file-loader.
webpack.config.js
moduleexports = module: rules: test: /\.$/i use: loader: 'image-trace-loader' loader: 'url-loader' options: limit: 8192 Options
The loader options allows you to specify values for all the parameters of the Potrace class, with the addition of skipTraceIfBase64.
| Name | Type | Default | Description |
|---|---|---|---|
turnPolicy |
{String} |
TURNPOLICY_MINORITY |
How to resolve ambiguities in path decomposition. Possible values are TURNPOLICY_BLACK, TURNPOLICY_WHITE, TURNPOLICY_LEFT, TURNPOLICY_RIGHT, TURNPOLICY_MINORITY, TURNPOLICY_MAJORITY. Refer to page 4 of this document for more information |
turdSize |
{Number} |
100 |
Suppress speckles of up to this size. Larger values significantly reduce the size of the traced outline |
alphaMax |
{Number} |
1 |
Corner threshold parameter. Lower values results in rougher edges, but significantly reduces the size of the traced outline |
optCurve |
{Boolean} |
true |
Curve optimization |
optTolerance |
{Number} |
0.2 |
Curve optimization tolerance |
threshold |
{Number\|String} |
THRESHOLD_AUTO |
Threshold below which the color is considered color. Should be a number in range 0..255 or THRESHOLD_AUTO in which case threshold will be selected automatically using Algorithm For Multilevel Thresholding |
flipColors |
{Boolean} |
false |
Specifies whether fill color and background color should be swapped |
color |
{String} |
COLOR_AUTO |
Fill color. COLOR_AUTO will extract and use the most prominent color of the source image |
background |
{String} |
COLOR_TRANSPARENT |
Background color |
skipTraceIfBase64 |
{Boolean} |
false |
If set to true, will not generate a traced outline if the image already is base64 encoded. Useful when the inlined base64 representation is enough, and you don't want to bloat your files with unused traces |
