Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including image-trace-loader with all npm packages installed. Try it out:

require("file-loader/package.json"); // file-loader is a peer dependency. var imageTraceLoader = require("image-trace-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

image-trace-loader v1.0.2

Loads images and exports traced outlines as image/svg+xml URL-encoded data

npm

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.

NameTypeDefaultDescription
turnPolicy{String}TURNPOLICY_MINORITYHow 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}100Suppress speckles of up to this size. Larger values significantly reduce the size of the traced outline
alphaMax{Number}1Corner threshold parameter. Lower values results in rougher edges, but significantly reduces the size of the traced outline
optCurve{Boolean}trueCurve optimization
optTolerance{Number}0.2Curve optimization tolerance
threshold{Number\|String}THRESHOLD_AUTOThreshold 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}falseSpecifies whether fill color and background color should be swapped
color{String}COLOR_AUTOFill color. COLOR_AUTO will extract and use the most prominent color of the source image
background{String}COLOR_TRANSPARENTBackground color
skipTraceIfBase64{Boolean}falseIf 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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free