Image RGB Color Viewer

function processImage(originalImg) {
    // Check if the image is loaded and has valid dimensions
    if (!originalImg || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        const errorDiv = document.createElement('div');
        errorDiv.textContent = 'Error: Image not loaded, has zero dimensions, or is invalid.';
        errorDiv.style.color = 'red';
        errorDiv.style.padding = '20px';
        errorDiv.style.border = '1px solid red';
        errorDiv.style.fontFamily = 'Arial, sans-serif';
        errorDiv.style.textAlign = 'center';
        return errorDiv;
    }

    // 1. Create main container
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.gap = '10px'; // Space between canvas and info box
    container.style.padding = '10px'; // Overall padding for the component

    // 2. Create canvas
    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height to get the actual dimensions of the image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    canvas.style.border = '1px solid #000'; // Border for the canvas itself
    // Optional: Constrain display size if image is very large for performance/layout
    // e.g., canvas.style.maxWidth = '100%'; canvas.style.maxHeight = '500px';
    // But for a "viewer", showing actual size and allowing scrolling is often expected.

    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Optimization hint

    // 3. Draw image onto canvas
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This could happen with certain image types or if the image object is unusual
        const errorDiv = document.createElement('div');
        errorDiv.textContent = 'Error: Could not draw image on canvas. ' + e.message;
        errorDiv.style.color = 'red';
        // (style as above)
        return errorDiv;
    }


    // 4. Create color info display element
    const colorInfoContainer = document.createElement('div');
    colorInfoContainer.style.display = 'flex';
    colorInfoContainer.style.alignItems = 'center';
    colorInfoContainer.style.padding = '8px 12px';
    colorInfoContainer.style.border = '1px solid #ccc';
    colorInfoContainer.style.borderRadius = '4px';
    colorInfoContainer.style.backgroundColor = '#f9f9f9';
    colorInfoContainer.style.minWidth = '220px'; // Ensure enough space for text
    colorInfoContainer.style.justifyContent = 'center';

    const colorSwatch = document.createElement('div');
    colorSwatch.style.width = '24px';
    colorSwatch.style.height = '24px';
    colorSwatch.style.border = '1px solid #333';
    colorSwatch.style.marginRight = '12px';
    colorSwatch.style.backgroundColor = '#fff'; // Default swatch color
    colorSwatch.style.flexShrink = '0'; // Prevent swatch from shrinking

    const colorText = document.createElement('span');
    colorText.textContent = 'Hover over image to see RGB';
    colorText.style.fontSize = '14px';

    colorInfoContainer.appendChild(colorSwatch);
    colorInfoContainer.appendChild(colorText);

    // 5. Add event listeners to canvas
    canvas.addEventListener('mousemove', function(event) {
        const rect = canvas.getBoundingClientRect();
        
        // Calculate mouse position relative to the canvas
        // Scale mouse coordinates if canvas is displayed smaller/larger than its drawingBuffer size
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        
        const x = Math.floor((event.clientX - rect.left) * scaleX);
        const y = Math.floor((event.clientY - rect.top) * scaleY);

        // Boundary checks (though getImageData might clamp or error too)
        if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
            // Reset if mouse somehow reports outside canvas drawing buffer while still 'mousemove'-ing
            colorSwatch.style.backgroundColor = '#fff';
            colorText.textContent = 'Hover over image to see RGB';
            return;
        }

        try {
            // Get the pixel data for the 1x1 pixel at the mouse position
            const pixelData = ctx.getImageData(x, y, 1, 1).data;
            const r = pixelData[0];
            const g = pixelData[1];
            const b = pixelData[2];
            // const a = pixelData[3]; // Alpha value, not displayed as per "RGB Color Viewer"

            colorSwatch.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
            colorText.textContent = `RGB: (${r}, ${g}, ${b})  |  XY: (${x}, ${y})`;
        } catch (e) {
            // This can happen if the image is from a different origin (CORS)
            // and the canvas becomes tainted.
            console.error("Error getting pixel data:", e);
            colorText.textContent = 'Cannot read pixel data (CORS issue?)';
            colorSwatch.style.backgroundColor = '#fff'; // Reset swatch
            // Disable further attempts if it's a security error to avoid console spam
            if (e.name === 'SecurityError') {
                canvas.removeEventListener('mousemove', arguments.callee); // 'arguments.callee' refers to the current function
                canvas.removeEventListener('mouseout', namedMouseOutHandler); // Need to name mouseout handler
            }
        }
    });

    const namedMouseOutHandler = function() {
        colorSwatch.style.backgroundColor = '#fff'; // Reset swatch
        colorText.textContent = 'Hover over image to see RGB';
    };
    canvas.addEventListener('mouseout', namedMouseOutHandler);

    // 6. Append elements to container
    container.appendChild(canvas);
    container.appendChild(colorInfoContainer);

    // 7. Return the main container element
    return container;
}