Image Audio Device Manager

/**
 * Creates a visual effect reminiscent of an audio device's spectrum analyzer or graphic equalizer.
 * This function analyzes vertical slices of the input image and overlays bars on top of it,
 * with the height of each bar corresponding to the brightness or color intensity of that slice.
 * This provides a creative interpretation of an "Image Audio Device Manager" by treating
 * the image's visual data as an audio signal to be visualized.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [barCount=64] The total number of vertical bars to display in the analyzer.
 * @param {string} [barColor='rgba(0, 255, 0, 0.7)'] The color of the analyzer bars. Any valid CSS color string is accepted.
 * @param {string} [mode='brightness'] Determines which image property to analyze for bar height.
 *                                     Valid options are 'brightness', 'red', 'green', or 'blue'.
 * @returns {HTMLCanvasElement} A new canvas element displaying the original image with the analyzer effect overlaid.
 */
function processImage(originalImg, barCount = 64, barColor = 'rgba(0, 255, 0, 0.7)', mode = 'brightness') {
    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the original image.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 3. Draw the original image onto the canvas to serve as the background.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 4. Get the pixel data from the canvas. Handle potential CORS security issues.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // If the image is from a different origin, getImageData will fail.
        // In this case, we return a canvas with a user-friendly error message.
        console.error("Could not get image data. This may be a Cross-Origin (CORS) security issue.", e);
        ctx.clearRect(0, 0, width, height);
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, width, height);
        ctx.font = '16px monospace';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: Cannot process cross-origin image.', width / 2, height / 2 - 10);
        ctx.fillText('Please use an image from the same domain.', width / 2, height / 2 + 10);
        return canvas;
    }
    const data = imageData.data;

    // 5. Sanitize parameters and calculate the width of each bar's slice.
    const numBars = Math.max(1, Math.floor(barCount));
    const sliceWidth = width / numBars;

    // 6. Iterate through each slice to calculate and draw the corresponding bar.
    for (let i = 0; i < numBars; i++) {
        let valueSum = 0;
        let pixelCount = 0;

        // Define the horizontal boundaries of the current vertical slice.
        const startX = Math.floor(i * sliceWidth);
        const endX = Math.floor((i + 1) * sliceWidth);

        // Loop through every pixel within this slice.
        for (let x = startX; x < endX; x++) {
            for (let y = 0; y < height; y++) {
                const pixelIndex = (y * width + x) * 4;
                const r = data[pixelIndex];
                const g = data[pixelIndex + 1];
                const b = data[pixelIndex + 2];

                let value;
                // Calculate the value based on the selected mode.
                switch (mode.toLowerCase()) {
                    case 'red':
                        value = r;
                        break;
                    case 'green':
                        value = g;
                        break;
                    case 'blue':
                        value = b;
                        break;
                    case 'brightness':
                    default:
                        // Use the luma formula for a human-perception-weighted brightness.
                        value = 0.299 * r + 0.587 * g + 0.114 * b;
                        break;
                }
                valueSum += value;
                pixelCount++;
            }
        }

        const avgValue = pixelCount > 0 ? valueSum / pixelCount : 0;

        // Map the average value (0-255) to a bar height (0-canvas.height).
        const barHeight = (avgValue / 255) * height;
        const currentBarWidth = endX - startX;

        // 7. Draw the bar onto the canvas, starting from the bottom edge.
        ctx.fillStyle = barColor;
        ctx.fillRect(startX, height - barHeight, currentBarWidth, barHeight);
    }

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