NeuQuant neural-network image quantization algorithm.
npm install neuquant-jsNeuQuant neural-network image quantization algorithm.
Original NeuQuant algorithm by Anthony Dekker.
JavaScript port by Johan Nordberg and Devon Govett.
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.
Here's an example extracting a palette of 16 colors from an image:
`js
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'
`
Here's an example converting a PNG image to GIF, using a sampling factor of 1:
`js
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))
`
Returns a buffer containing a palette of RGB colors for the input image.
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.
Combines the above two methods and returns an object containing both a palette buffer and the indexed pixel data at once.
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.
Underlying NeuQuant implementation.
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.
* Code: git clone git://github.com/unindented/neuquant-js.git`
* Home:
* Daniel Perez Alvarez (unindented@gmail.com)
Copyright (c) 1994 Anthony Dekker.
Copyright (c) 2012 Johan Nordberg.
Copyright (c) 2014 Devon Govett.
Copyright (c) 2016 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.