Image Identifier Tool

/**
 * Identifies the dominant colors in an image and displays them as a palette.
 * This function works by drawing the image to a canvas, pixelating it to group similar colors (color quantization),
 * counting the frequency of each color group, and then displaying the most frequent ones.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {number} [colorCount=8] The number of dominant colors to identify.
 * @returns {HTMLElement} A div element containing a visual palette of the dominant colors.
 */
async function processImage(originalImg, colorCount = 8) {
    // Ensure colorCount is a valid, positive integer.
    const numColors = Math.max(1, parseInt(colorCount, 10) || 8);

    // Create a container for the output
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.textAlign = 'center';
    resultContainer.style.padding = '10px';

    const title = document.createElement('h3');
    title.textContent = `Top ${numColors} Dominant Colors`;
    title.style.margin = '0 0 15px 0';
    resultContainer.appendChild(title);

    const paletteContainer = document.createElement('div');
    paletteContainer.style.display = 'flex';
    paletteContainer.style.flexWrap = 'wrap';
    paletteContainer.style.justifyContent = 'center';
    paletteContainer.style.gap = '10px';
    resultContainer.appendChild(paletteContainer);

    // Create a canvas to analyze the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    if (!ctx) {
        resultContainer.textContent = 'Canvas context is not supported in this browser.';
        return resultContainer;
    }

    // For performance, we can downscale large images before processing
    const maxDimension = 150;
    let { width, height } = originalImg;
    if (width > maxDimension || height > maxDimension) {
        if (width > height) {
            height = Math.round(maxDimension * (height / width));
            width = maxDimension;
        } else {
            width = Math.round(maxDimension * (width / height));
            height = maxDimension;
        }
    }
    canvas.width = width;
    canvas.height = height;

    try {
        ctx.drawImage(originalImg, 0, 0, width, height);
        const imageData = ctx.getImageData(0, 0, width, height).data;
        const colorMap = new Map();

        // Simple color quantization by binning colors.
        // This groups very similar colors together.
        const quantizationStep = 24;

        for (let i = 0; i < imageData.length; i += 4) {
            // Ignore pixels that are mostly transparent
            if (imageData[i + 3] < 128) {
                continue;
            }

            const r = Math.round(imageData[i] / quantizationStep) * quantizationStep;
            const g = Math.round(imageData[i + 1] / quantizationStep) * quantizationStep;
            const b = Math.round(imageData[i + 2] / quantizationStep) * quantizationStep;
            const key = `${r},${g},${b}`;

            colorMap.set(key, (colorMap.get(key) || 0) + 1);
        }

        // Sort colors by frequency in descending order
        const sortedColors = [...colorMap.entries()].sort((a, b) => b[1] - a[1]);

        // Get the top colors
        const dominantColors = sortedColors.slice(0, numColors);

        if (dominantColors.length === 0) {
            paletteContainer.textContent = 'Could not identify any colors. The image might be empty or fully transparent.';
            return resultContainer;
        }

        // Helper function to convert an RGB color to a hex string
        const toHex = (c) => ('0' + c.toString(16)).slice(-2);

        dominantColors.forEach(([rgbString]) => {
            const [r, g, b] = rgbString.split(',').map(Number);
            const hexColor = `#${toHex(r)}${toHex(g)}${toHex(b)}`;

            // Determine if text should be light or dark based on background luminance
            const luminance = (0.299 * r + 0.587 * g + 0.114 * b);
            const textColor = luminance > 128 ? '#000000' : '#FFFFFF';

            const swatch = document.createElement('div');
            swatch.style.backgroundColor = hexColor;
            swatch.style.color = textColor;
            swatch.style.padding = '10px';
            swatch.style.borderRadius = '8px';
            swatch.style.minWidth = '110px';
            swatch.style.flex = '1';
            swatch.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
            swatch.style.display = 'flex';
            swatch.style.flexDirection = 'column';
            swatch.style.justifyContent = 'center';
            swatch.style.alignItems = 'center';

            const hexText = document.createElement('div');
            hexText.textContent = hexColor.toUpperCase();
            hexText.style.fontWeight = 'bold';
            hexText.style.fontSize = '1.1em';
            
            const rgbText = document.createElement('div');
            rgbText.textContent = `rgb(${r}, ${g}, ${b})`;
            rgbText.style.fontSize = '0.8em';
            rgbText.style.marginTop = '4px';

            swatch.appendChild(hexText);
            swatch.appendChild(rgbText);
            paletteContainer.appendChild(swatch);
        });

    } catch (e) {
        console.error('Image processing failed:', e);
        resultContainer.innerHTML = `<p style="color: red;">Error: Could not process the image. It might be from a different origin (CORS policy) or in an unsupported format.</p>`;
    }

    return resultContainer;
}