Image Food Product Organizer

/**
 * Analyzes an image of food products to extract and display a palette of its dominant colors.
 * This can be seen as a way of "organizing" the visual information of the food items.
 * The function returns a new canvas containing the original image with the color palette displayed underneath.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} colorCount The number of dominant colors to extract from the image.
 * @param {number} swatchSize The size (in pixels) of each color swatch in the palette.
 * @returns {HTMLCanvasElement} A new canvas element with the image and its color palette.
 */
function processImage(originalImg, colorCount = 5, swatchSize = 50) {
    // 1. Create a temporary canvas to read the image's pixel data.
    // Using willReadFrequently is an optimization hint for the browser.
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    });
    tempCanvas.width = originalImg.naturalWidth;
    tempCanvas.height = originalImg.naturalHeight;
    tempCtx.drawImage(originalImg, 0, 0);

    let imageData;
    try {
        // This can throw a security error if the image is from a different origin (CORS policy).
        imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height).data;
    } catch (e) {
        console.error("Could not get image data. The image might be from a different origin.", e);
        // As a fallback, render just the original image and return it.
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = originalImg.naturalWidth;
        fallbackCanvas.height = originalImg.naturalHeight;
        fallbackCanvas.getContext('2d').drawImage(originalImg, 0, 0);
        return fallbackCanvas;
    }

    // 2. Count the frequency of each color in the image.
    // To make this efficient, we group similar colors together (quantization).
    const colorMap = {};
    const quantizationStep = 32; // Group colors into bins of this size (0-255). Lower is more precise.

    for (let i = 0; i < imageData.length; i += 4) {
        // Skip 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 colorKey = `${r},${g},${b}`;
        colorMap[colorKey] = (colorMap[colorKey] || 0) + 1;
    }

    // 3. Sort the colors by frequency to find the most dominant ones.
    const sortedColors = Object.keys(colorMap)
        .map(key => ({
            color: key,
            count: colorMap[key]
        }))
        .sort((a, b) => b.count - a.count);

    // 4. Get the top N dominant colors.
    const dominantColors = sortedColors.slice(0, colorCount).map(c => c.color);

    // 5. Create the final output canvas.
    const padding = 10;
    const paletteAreaHeight = swatchSize + padding * 2;
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');

    outputCanvas.width = originalImg.naturalWidth;
    outputCanvas.height = originalImg.naturalHeight + paletteAreaHeight;

    // 6. Draw the original image onto the output canvas.
    outputCtx.drawImage(originalImg, 0, 0);

    // 7. Draw the color palette area below the image.
    outputCtx.fillStyle = '#ffffff';
    outputCtx.fillRect(0, originalImg.naturalHeight, outputCanvas.width, paletteAreaHeight);

    // Calculate starting position to center the swatches.
    const totalSwatchesWidth = (colorCount * swatchSize) + ((colorCount - 1) * padding);
    let startX = (outputCanvas.width - totalSwatchesWidth) / 2;
    const startY = originalImg.naturalHeight + padding;

    dominantColors.forEach(colorString => {
        outputCtx.fillStyle = `rgb(${colorString})`;
        outputCtx.fillRect(startX, startY, swatchSize, swatchSize);

        // Add a light border to each swatch for better visibility.
        outputCtx.strokeStyle = '#dddddd';
        outputCtx.lineWidth = 1;
        outputCtx.strokeRect(startX, startY, swatchSize, swatchSize);

        startX += swatchSize + padding;
    });

    // 8. Return the final canvas element.
    return outputCanvas;
}