Image Category And Decorator

function processImage(originalImg, textColor = '#FFFFFF', labelBgColor = 'rgba(0, 0, 0, 0.6)', fontSize = 24, fontFamily = 'Arial') {
    // 1. Setup the main canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height to ensure we get the original image dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 2. Perform Image Categorization
    
    // 2a. Categorize by Aspect Ratio
    let aspectRatioCategory;
    const ratio = canvas.width / canvas.height;
    if (ratio > 1.15) {
        aspectRatioCategory = 'Landscape';
    } else if (ratio < 0.85) {
        aspectRatioCategory = 'Portrait';
    } else {
        aspectRatioCategory = 'Square';
    }
    
    // Create a temporary, off-screen canvas for image analysis
    // This allows us to read pixel data without affecting the final canvas.
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true }); // Performance hint
    tempCanvas.width = canvas.width;
    tempCanvas.height = canvas.height;
    tempCtx.drawImage(originalImg, 0, 0);

    // 2b. Categorize by Brightness
    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
    const data = imageData.data;
    let totalLuminance = 0;
    let pixelCount = 0;
    
    // To ensure good performance on large images, we sample the pixels.
    // This calculates a step rate to analyze a maximum of ~100,000 pixels.
    const sampleRate = Math.max(1, Math.floor((data.length / 4) / 100000));
    
    for (let i = 0; i < data.length; i += 4 * sampleRate) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Using the standard formula for luminance (perceived brightness)
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b);
        totalLuminance += luminance;
        pixelCount++;
    }

    const averageLuminance = totalLuminance / pixelCount;
    let brightnessCategory;
    // Categorize based on average brightness (0-255 scale)
    if (averageLuminance > 165) {
        brightnessCategory = 'Bright';
    } else if (averageLuminance < 90) {
        brightnessCategory = 'Dark';
    } else {
        brightnessCategory = 'Balanced';
    }

    // 3. Decorate the Image on the main canvas
    
    // First, draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Combine the determined categories into a final label
    const categoryLabel = `${brightnessCategory} ${aspectRatioCategory}`;

    // Prepare font and alignment for drawing the label
    ctx.font = `bold ${fontSize}px ${fontFamily}`;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';

    const textMetrics = ctx.measureText(categoryLabel);
    const padding = fontSize * 0.4;

    // Use accurate text metrics to size the background rectangle
    const textWidth = textMetrics.width;
    const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;

    // Position the label in the bottom-left corner with padding
    const rectX = padding;
    const rectY = canvas.height - textHeight - padding * 1.5;
    const rectWidth = textWidth + padding * 2;
    const rectHeight = textHeight + padding;

    // Draw the semi-transparent background for the label to ensure readability
    ctx.fillStyle = labelBgColor;
    ctx.fillRect(rectX, rectY, rectWidth, rectHeight);

    // Draw the category text over the background
    ctx.fillStyle = textColor;
    ctx.fillText(categoryLabel, rectX + padding, rectY + padding / 2);

    // 4. Return the final canvas element with the decorated image
    return canvas;
}