Image To RGB Values Converter

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for the true dimensions of the image,
    // falling back to 0 if not available (e.g., image not loaded).
    const width = originalImg.naturalWidth || 0;
    const height = originalImg.naturalHeight || 0;

    canvas.width = width;
    canvas.height = height;

    const outputTextArea = document.createElement('textarea');
    outputTextArea.readOnly = true;
    outputTextArea.style.width = '100%';
    outputTextArea.style.height = '300px'; // A sensible default height
    outputTextArea.style.fontFamily = 'monospace';
    outputTextArea.setAttribute('aria-label', 'RGB values of the image');

    if (width === 0 || height === 0) {
        outputTextArea.value = "Image has zero width or height, or it has not loaded properly. No RGB values to display.";
        return outputTextArea;
    }

    try {
        // Draw the image onto the canvas. This operation can be restricted by CORS.
        ctx.drawImage(originalImg, 0, 0, width, height);

        // Get the pixel data from the canvas.
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

        const lines = [];
        // Iterate over each pixel
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                // Calculate the starting index of the CAs for the current pixel
                const index = (y * width + x) * 4;
                const r = data[index];     // Red channel
                const g = data[index + 1]; // Green channel
                const b = data[index + 2]; // Blue channel
                // Alpha channel (data[index + 3]) is ignored as per "RGB values".
                
                lines.push(`Pixel (${x}, ${y}): R=${r}, G=${g}, B=${b}`);
            }
        }
        
        if (lines.length === 0) {
            // This case should ideally be covered by the width/height check,
            // but as a fallback.
            outputTextArea.value = "No pixel data found in the image.";
        } else {
            outputTextArea.value = lines.join('\n');
        }

    } catch (error) {
        console.error("Error processing image for RGB values:", error);
        let errorMessage = `Error processing image: ${error.message}`;
        if (error.name === 'SecurityError') {
            // This error occurs if the image is cross-origin and the canvas becomes tainted.
            errorMessage = "Cannot process image due to cross-origin security restrictions. " +
                           "If you are loading an image from a different domain, " +
                           "ensure it is served with appropriate CORS headers (e.g., Access-Control-Allow-Origin: '*') " +
                           "or that the image and the script are on the same domain.";
        }
        outputTextArea.value = errorMessage;
    }

    return outputTextArea;
}