Neuquant-js NPM

NeuQuant

NeuQuant neural-network image quantization algorithm.

Original NeuQuant algorithm by Anthony Dekker.

JavaScript port by Johan Nordberg and Devon Govett.

Installation

Just run the following:

$ npm install --save neuquant-js

This assumes that you're using the npm package manager with a module bundler like Webpack or Browserify.

If you don't yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes NeuQuant available as a global object, you can build it yourself by running the following:

$ npm run build

You'll find the development (neuquant.js) and production (neuquant.min.js) versions of the library in the dist folder. I don't recommend this approach for any serious application.

Examples

Palette extraction (browser)

Here's an example extracting a palette of 16 colors from an image:

import {palette} from 'neuquant-js'

const rgbToHex = (r, g, b) => {
  const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
  return `#${hex}`
}

const extractPalette = (img) => {
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height

  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0)

  const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data
  const colors = palette(data, {netsize: 16})

  const result = []
  for (let i = 0, l = colors.length; i < l;) {
    result.push(rgbToHex(colors[i++], colors[i++], colors[i++]))
  }
  return result
}

const img = document.createElement('img')
img.onload = (evt) => {
  console.log(extractPalette(evt.target))
}
img.src = '/image.png'

Stream processing (Node)

Here's an example converting a PNG image to GIF, using a sampling factor of 1:

import fs from 'fs'
import path from 'path'
import {Encoder as GIFEncoder} from 'gif-stream'
import {Decoder as PNGDecoder} from 'png-stream'
import NeuQuantStream from 'neuquant-js/stream'

const src = path.resolve(__dirname, 'image.png')
const dest = path.resolve(__dirname, 'image.gif')

fs.createReadStream(src)
  .pipe(new PNGDecoder())
  .pipe(new NeuQuantStream(0, 0, {samplefac: 1}))
  .pipe(new GIFEncoder())
  .pipe(fs.createWriteStream(dest))

API

`palette (pixels, options)`

Returns a buffer containing a palette of RGB colors for the input image.

`indexed (pixels, palette)`

Returns a new buffer containing the indexed pixel data for the input image using the given palette, which is a buffer obtained from the above method.

`quantize (pixels, options)`

Combines the above two methods and returns an object containing both a palette buffer and the indexed pixel data at once.

`Stream (width, height, options)`

You can pipe data to this stream, including multi-frame data, and it will produce an indexed output chunk for each frame. You can access the palette for each frame by listening for frame events on the stream.

`NeuQuant (pixels, options)`

Underlying NeuQuant implementation.

Options

netsize (default 256): Number of colors used.
samplefac (default 10): Sampling factor, which can be changed to increase or decrease quality at the expense of performance. The lower the number, the higher the quality.