Complete Image Quantization Library in TypeScript (MIT License)
Image Color Number Reduction with alpha support using RgbQuant/NeuQuant/Xiaolin Wu's algorithms and Euclidean/Manhattan/CIEDE2000 color distance formulas in TypeScript
-
Platforms supported
- browser (Chrome 7.0+, FireFox 4.0+, IE 10+, Opera 11.6+, Safari 5.1+)
- node.js (Node.js 0.9.0+)
-
Builds
- dist/browser-iq.js - JavaScript build for browser (global
var IQ
) - dist/node-iq.js - JavaScript build for Node.js (
module.exports = IQ
) - src/iq.ts - TypeScript module (use
/// <reference path="path-to-library/src/iq.ts" />
)
- dist/browser-iq.js - JavaScript build for browser (global
-
Import
HTMLImageElement
HTMLCanvasElement
NodeCanvas
ImageData
Array
CanvasPixelArray
Uint8Array
Uint32Array
-
Color Distance
Euclidean
- originally used in Xiaolin Wu's Quantizer WuQuantEuclideanRgbQuantWOAlpha
(sRGB coefficients/without alpha support) - originally used in RgbQuantEuclideanRgbQuantWithAlpha
(sRGB coefficients)Manhattan
- originally used in NeuQuantManhattanSRGB
(sRGB coefficients)CIEDE2000_Original
- full CIEDE2000 implementation (very very very slow)CIEDE2000
- part of formula was stripped as it meaningless for JavaScript floating-point precision/RGB 8bit per channel converted to Lab (very very slow)CIE94
- full CIE94 implementationCMETRIC
PNGQUANT
- used in pngQuant tool
-
Palette Quantizers
NeuQuant
(original code ported, integer calculations)RgbQuant
WuQuant
NeuQuantFloat
(floating-point calculations)
-
Image Quantizers
NearestColor
ErrorDiffusionArray
- two modes of error propagation are supported:xnview
andgimp
FloydSteinberg
FalseFloydSteinberg
Stucki
Atkinson
Jarvis
Burkes
Sierra
TwoSierra
SierraLite
ErrorDiffusionRiemersma
- Hilbert space-filling curve is used
-
Output
Uint32Array
Uint8Array
/// <reference path='<path-to-iq>/src/iq.ts' />
var iq = require("<path-to-iq>/dist/node-iq.js");
<script src="<path-to-iq>/dist/browser-iq.js" type="text/javascript" charset="utf-8"></script>
var img = document.createElement("img");
img.onload = function() {
// image is loaded, here should be all code utilizing image
...
}
img.src = "http://pixabay.com/static/uploads/photo/2012/04/11/11/32/letter-a-27580_640.png"
// desired colors number
var targetColors = 256;
// create pointContainer and fill it with image
var pointContainer = IQ.Utils.PointContainer.fromHTMLImageElement(img);
// create chosen distance calculator (see classes implementing `IQ.Distance.IDistanceCalculator`)
var distanceCalculator = new IQ.Distance.Euclidean();
// create chosen palette quantizer (see classes implementing `IQ.Palette.IPaletteQuantizer`)
var paletteQuantizer = new IQ.Palette.RgbQuant(distanceCalculator, targetColors);
// feed out pointContainer filled with image to paletteQuantizer
paletteQuantizer.sample(pointContainer);
... (you may sample more than one image to create mutual palette)
// take generated palette
var palette = paletteQuantizer.quantize();
// create image quantizer (see classes implementing `IQ.Image.IImageDitherer`)
var imageDitherer = new IQ.Image.NearestColor(distanceCalculator);
// apply palette to image
var resultPointContainer = imageQuantizer.quantize(pointContainer, palette);
You may work with resultPointContainer directly or you may convert it to Uint8Array
/Uint32Array
var uint8array = resultPointContainer.toUint8Array();
- notification about progress
riemersma dithering- ordered dithering
+ Refactoring
+ Riemersma dithering added (Hilbert Curve)
+ Readme.md updated
+ build.cmd updated
+ NeuQuant is fixed (again) according to original Anthony Dekker source code (all values should be integer)
+ Error Diffusion Dithering is now calculates error like XNVIEW
+ Refactoring
+ Documentation generation fixed
+ File name case problem fixed
+ Auto-generated documentation added
+ Refactoring
+ Code cleanup, removed unnecessary files
+ PNGQUANT color distance added, need to check its quality
+ CIEDE2000 and CIE94 fixed for use in NeuQuant
+ NeuQuant is fixed according to original Anthony Dekker source code (all values should be integer)
+ Code refactoring and cleanup
* We have some slowdown because of red/green/blue/alpha normalization according to white point per each calculateRaw/calculateNormalized call
+ CIEDE2000 color distance equation optimized (original CIEDE2000 equation is available as class `CIEDE2000_Original`)
+ CMETRIC color distance fixed
+ Cleanup
+ Draft of CMETRIC color distance added
+ rgb2xyz & xyz2lab fixed. CIEDE2000 works much better now.
+ CIE94 distance formula added. More investigation is needed.
+ Initial
Thanks to Leon Sorokin for information share and his original RgbQuant!
-
Palette Quantization Algorithms
- RgbQuant (Leon Sorokin)
JavaScript
- NeuQuant (Johan Nordberg)
TypeScript
- NeuQuant (Tim Oxley)
JavaScript
- NeuQuant (Devon Govett)
JavaScript
- NeuQuant32 (Stuart Coyle)
C
- Xiaolin Wu (Xiaolin Wu)
C
- Xiaolin Wu (Smart-K8)
C#
- Xiaolin Wu w/ Alpha (Matt Wrock) How to add Alpha, Source Code
C#
- MedianCut (mwcz)
GPLv3
- RgbQuant (Leon Sorokin)
-
Image Quantization Algorithms
-
Color Distance Formulas
- Euclidean Distance
- Manhattan Distance
- CIE94 Distance
- CIEDE2000
- Euclidean Distance w/o Alpha (RgbQuant)
- Euclidean Distance w/o sRGB coefficients (Xiaolin Wu Quant)
- Manhattan Distance w/o sRGB coefficients (NeuQuant)
- CMETRIC
DRAFT!
-
Color conversion formulas
Be sure to fix rgb2xyz/xyz2lab. Issue is with strange part of code:
r = r > 0.04045 ? ...
. Check http://en.wikipedia.org/wiki/Lab_color_space
-
Image Quality Assessment
- SSIM info
- SSIM (Rhys-e)
Java
License: MIT
- PSNR ? TBD
- MSE ? TBD
-
Other
- HUSL (Boronine) - info
- HUSL (Boronine) - code
- Color Image Quantization for Frame Buffer Display
- K-Means
- Efficient Color Quantization by Hierarchical Clustering Algorithms