How to use image-q - 10 common examples
To help you get started, we’ve selected a few image-q examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jhuckaby / canvas-plus / lib / filter / quantize.js View on Github 
// create chosen palette quantizer (see classes implementing `iq.palette.IPaletteQuantizer`)
var paletteQuantizer = new iq.palette[opts.quantizer](distanceCalculator, targetColors);
// feed out pointContainer filled with image to paletteQuantizer
paletteQuantizer.sample(pointContainer);
// generate palette
var palette = paletteQuantizer.quantize();
// get color array
var iq_colors = palette.getPointContainer().getPointArray();
// create image quantizer (see classes implementing `iq.image.IImageDitherer`)
var imageDitherer = opts.dither ?
(new iq.image.ErrorDiffusionArray(distanceCalculator, iq.image.ErrorDiffusionArrayKernel[opts.ditherType])) :
(new iq.image.NearestColor(distanceCalculator));
// apply palette to image
var resultPointContainer = imageDitherer.quantize(pointContainer, palette);
// get pixel array
var iq_pixels = resultPointContainer.getPointArray();
// convert pixels to array of palette indexes
var palette_offset = 0;
var palette_data = new Uint8Array( iq_colors.length * 3 );
var color_hash = {};
var iq_color = null;
// build palette structure and color hash table
for (var idx = 0, len = iq_colors.length; idx < len; idx++) {
iq_color = iq_colors[idx];// create chosen palette quantizer (see classes implementing `iq.palette.IPaletteQuantizer`)
var paletteQuantizer = new iq.palette[opts.quantizer](distanceCalculator, targetColors);
// feed out pointContainer filled with image to paletteQuantizer
paletteQuantizer.sample(pointContainer);
// generate palette
var palette = paletteQuantizer.quantize();
// get color array
var iq_colors = palette.getPointContainer().getPointArray();
// create image quantizer (see classes implementing `iq.image.IImageDitherer`)
var imageDitherer = opts.dither ?
(new iq.image.ErrorDiffusionArray(distanceCalculator, iq.image.ErrorDiffusionArrayKernel[opts.ditherType])) :
(new iq.image.NearestColor(distanceCalculator));
// apply palette to image
var resultPointContainer = imageDitherer.quantize(pointContainer, palette);
// get pixel array
var iq_pixels = resultPointContainer.getPointArray();
// convert pixels to array of palette indexes
var palette_offset = 0;
var palette_data = new Uint8Array( iq_colors.length * 3 );
var color_hash = {};
var iq_color = null;
// build palette structure and color hash table
for (var idx = 0, len = iq_colors.length; idx < len; idx++) {var imgData = this.context.getImageData(0, 0, width, height);
// desired colors number
var targetColors = parseInt( opts.colors || 0 );
if (!targetColors || isNaN(targetColors) || (targetColors < 2) || (targetColors > 256)) {
return this.doError('quantize', "Invalid palette size: " + targetColors);
}
// create pointContainer and fill it with image
var pointContainer = iq.utils.PointContainer.fromImageData( imgData );
// create chosen distance calculator (see classes inherited from `iq.distance.AbstractDistanceCalculator`)
var distanceCalculator = opts.alpha ?
(new iq.distance.EuclideanRgbQuantWithAlpha()) :
(new iq.distance.EuclideanRgbQuantWOAlpha());
// create chosen palette quantizer (see classes implementing `iq.palette.IPaletteQuantizer`)
var paletteQuantizer = new iq.palette[opts.quantizer](distanceCalculator, targetColors);
// feed out pointContainer filled with image to paletteQuantizer
paletteQuantizer.sample(pointContainer);
// generate palette
var palette = paletteQuantizer.quantize();
// get color array
var iq_colors = palette.getPointContainer().getPointArray();
// create image quantizer (see classes implementing `iq.image.IImageDitherer`)
var imageDitherer = opts.dither ?
(new iq.image.ErrorDiffusionArray(distanceCalculator, iq.image.ErrorDiffusionArrayKernel[opts.ditherType])) :var targetColors = parseInt( opts.colors || 0 );
if (!targetColors || isNaN(targetColors) || (targetColors < 2) || (targetColors > 256)) {
return this.doError('quantize', "Invalid palette size: " + targetColors);
}
// create pointContainer and fill it with image
var pointContainer = iq.utils.PointContainer.fromImageData( imgData );
// create chosen distance calculator (see classes inherited from `iq.distance.AbstractDistanceCalculator`)
var distanceCalculator = opts.alpha ?
(new iq.distance.EuclideanRgbQuantWithAlpha()) :
(new iq.distance.EuclideanRgbQuantWOAlpha());
// create chosen palette quantizer (see classes implementing `iq.palette.IPaletteQuantizer`)
var paletteQuantizer = new iq.palette[opts.quantizer](distanceCalculator, targetColors);
// feed out pointContainer filled with image to paletteQuantizer
paletteQuantizer.sample(pointContainer);
// generate palette
var palette = paletteQuantizer.quantize();
// get color array
var iq_colors = palette.getPointContainer().getPointArray();
// create image quantizer (see classes implementing `iq.image.IImageDitherer`)
var imageDitherer = opts.dither ?
(new iq.image.ErrorDiffusionArray(distanceCalculator, iq.image.ErrorDiffusionArrayKernel[opts.ditherType])) :
(new iq.image.NearestColor(distanceCalculator));
// apply palette to imagevar num_pixels = width * height;
this.logDebug(6, "Quantizing image", { colors: opts.colors, dither: opts.dither, width: width, height: height, pixels: num_pixels } );
// get rgba pixels from canvas
var imgData = this.context.getImageData(0, 0, width, height);
// desired colors number
var targetColors = parseInt( opts.colors || 0 );
if (!targetColors || isNaN(targetColors) || (targetColors < 2) || (targetColors > 256)) {
return this.doError('quantize', "Invalid palette size: " + targetColors);
}
// create pointContainer and fill it with image
var pointContainer = iq.utils.PointContainer.fromImageData( imgData );
// create chosen distance calculator (see classes inherited from `iq.distance.AbstractDistanceCalculator`)
var distanceCalculator = opts.alpha ?
(new iq.distance.EuclideanRgbQuantWithAlpha()) :
(new iq.distance.EuclideanRgbQuantWOAlpha());
// create chosen palette quantizer (see classes implementing `iq.palette.IPaletteQuantizer`)
var paletteQuantizer = new iq.palette[opts.quantizer](distanceCalculator, targetColors);
// feed out pointContainer filled with image to paletteQuantizer
paletteQuantizer.sample(pointContainer);
// generate palette
var palette = paletteQuantizer.quantize();
// get color array}
if (dither.minimumColorDistanceToDither === undefined) {
dither.minimumColorDistanceToDither = 0;
}
if (dither.calculateErrorLikeGIMP === undefined) {
dither.calculateErrorLikeGIMP = false;
}
}
const distCalculator = new ImageQ.distance.Euclidean();
const quantizer = new ImageQ.palette[method](distCalculator, maxColorIndexes, modifier);
let imageMaker;
if (dither) {
imageMaker = new ImageQ.image.ErrorDiffusionArray(
distCalculator,
ImageQ.image.ErrorDiffusionArrayKernel[dither.ditherAlgorithm],
dither.serpentine,
dither.minimumColorDistanceToDither,
dither.calculateErrorLikeGIMP
);
}
else {
imageMaker = new ImageQ.image.NearestColor(distCalculator);
}
const inputContainers = [];
images.forEach(image => {
const imageBuf = image.bitmap.data;
const inputBuf = new ArrayBuffer(imageBuf.length);
const inputArray = new Uint32Array(inputBuf);
for (let bi = 0, ai = 0; bi < imageBuf.length; bi += 4, ++ai) {if (dither.serpentine === undefined) {
dither.serpentine = true;
}
if (dither.minimumColorDistanceToDither === undefined) {
dither.minimumColorDistanceToDither = 0;
}
if (dither.calculateErrorLikeGIMP === undefined) {
dither.calculateErrorLikeGIMP = false;
}
}
const distCalculator = new ImageQ.distance.Euclidean();
const quantizer = new ImageQ.palette[method](distCalculator, maxColorIndexes, modifier);
let imageMaker;
if (dither) {
imageMaker = new ImageQ.image.ErrorDiffusionArray(
distCalculator,
ImageQ.image.ErrorDiffusionArrayKernel[dither.ditherAlgorithm],
dither.serpentine,
dither.minimumColorDistanceToDither,
dither.calculateErrorLikeGIMP
);
}
else {
imageMaker = new ImageQ.image.NearestColor(distCalculator);
}
const inputContainers = [];
images.forEach(image => {
const imageBuf = image.bitmap.data;
const inputBuf = new ArrayBuffer(imageBuf.length);if (dither) {
if (ditherAlgs.indexOf(dither.ditherAlgorithm) < 0) {
throw new Error(`Invalid ditherAlgorithm '${dither.ditherAlgorithm}'`);
}
if (dither.serpentine === undefined) {
dither.serpentine = true;
}
if (dither.minimumColorDistanceToDither === undefined) {
dither.minimumColorDistanceToDither = 0;
}
if (dither.calculateErrorLikeGIMP === undefined) {
dither.calculateErrorLikeGIMP = false;
}
}
const distCalculator = new ImageQ.distance.Euclidean();
const quantizer = new ImageQ.palette[method](distCalculator, maxColorIndexes, modifier);
let imageMaker;
if (dither) {
imageMaker = new ImageQ.image.ErrorDiffusionArray(
distCalculator,
ImageQ.image.ErrorDiffusionArrayKernel[dither.ditherAlgorithm],
dither.serpentine,
dither.minimumColorDistanceToDither,
dither.calculateErrorLikeGIMP
);
}
else {
imageMaker = new ImageQ.image.NearestColor(distCalculator);
}
const inputContainers = [];if (ditherAlgs.indexOf(dither.ditherAlgorithm) < 0) {
throw new Error(`Invalid ditherAlgorithm '${dither.ditherAlgorithm}'`);
}
if (dither.serpentine === undefined) {
dither.serpentine = true;
}
if (dither.minimumColorDistanceToDither === undefined) {
dither.minimumColorDistanceToDither = 0;
}
if (dither.calculateErrorLikeGIMP === undefined) {
dither.calculateErrorLikeGIMP = false;
}
}
const distCalculator = new ImageQ.distance.Euclidean();
const quantizer = new ImageQ.palette[method](distCalculator, maxColorIndexes, modifier);
let imageMaker;
if (dither) {
imageMaker = new ImageQ.image.ErrorDiffusionArray(
distCalculator,
ImageQ.image.ErrorDiffusionArrayKernel[dither.ditherAlgorithm],
dither.serpentine,
dither.minimumColorDistanceToDither,
dither.calculateErrorLikeGIMP
);
}
else {
imageMaker = new ImageQ.image.NearestColor(distCalculator);
}
const inputContainers = [];
images.forEach(image => {images.forEach(image => {
const imageBuf = image.bitmap.data;
const inputBuf = new ArrayBuffer(imageBuf.length);
const inputArray = new Uint32Array(inputBuf);
for (let bi = 0, ai = 0; bi < imageBuf.length; bi += 4, ++ai) {
inputArray[ai] = imageBuf.readUInt32LE(bi, true);
}
const inputContainer = ImageQ.utils.PointContainer.fromUint32Array(
inputArray, image.bitmap.width, image.bitmap.height);
quantizer.sample(inputContainer);
inputContainers.push(inputContainer);
});image-q
Image Quantization Library in **TypeScript** *(MIT Licensed)*
