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

License

EmilTholin/image-trace-loader

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Used by 669

Languages

Error
Looks like something went wrong!

Packages