GitHub - EmilTholin/image-trace-loader: Loads images and exports traced outlines...
source link: https://github.com/EmilTholin/image-trace-loader
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 |
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK