image-q

import { utils, dist, palette, image, } from 'image-q'; // Mock ImageData for demonstration. In a real app, you'd get this from a CanvasRenderingContext2D. const width = 16; const height = 16; const data = new Uint8Array(width * height * 4); for (let i = 0; i < data.length; i += 4) { data[i] = Math.floor(Math.random() * 256); // R data[i + 1] = Math.floor(Math.random() * 256); // G data[i + 2] = Math.floor(Math.random() * 256); // B data[i + 3] = 255; // A } const imageData = { data, width, height }; async function quantizeImage() { // 1. Convert raw image data to PointContainer format const inPointContainer = utils.PointContainer.fromImageData(imageData); // 2. Define a color distance metric (e.g., Euclidean with BT.709 coefficients) const distanceCalculator = new dist.EuclideanBT709(); // 3. Define a palette quantizer (e.g., NeuQuant to generate a 256-color palette) const paletteQuantizer = new palette.NeuQuant(distanceCalculator, 256); const colorPointContainer = await paletteQuantizer.quantize(inPointContainer); // 4. Define an image quantizer (e.g., Floyd-Steinberg error diffusion dithering) const imageQuantizer = new image.ErrorDiffusionArray( distanceCalculator, image.ErrorDiffusionArrayKernel.FloydSteinberg ); // 5. Quantize the image pixels against the generated palette const outPointContainer = await imageQuantizer.quantize(inPointContainer, colorPointContainer); // 6. Get the result as a Uint8Array (RGBA data) const quantizedData = outPointContainer.toUint8Array(); console.log('Quantized image data (first 16 bytes):', quantizedData.slice(0, 16)); console.log('Original image dimensions:', `${width}x${height}`); console.log('Quantized image data length:', quantizedData.length); } quantizeImage().catch(console.error);