Awesome
Image Trace Loader
Loads images and exports traced outlines as image/svg+xml URL-encoded data
Install
npm install --save-dev image-trace-loader
Inspiration
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
.
import { src, trace } from './image.png';
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(gif|png|jpe?g)$/i,
use: [
{
loader: 'image-trace-loader'
}
]
}
]
}
}
It can also be used in conjunction with url-loader or file-loader.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(gif|png|jpe?g)$/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 |