Image To Hex Code Converter

function processImage(originalImg) {
    // Check if the image object is valid and has dimensions.
    // An Image object has naturalWidth/naturalHeight properties.
    // If the image hasn't loaded or is invalid, these might be 0.
    if (!originalImg || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        const errorTextarea = document.createElement('textarea');
        errorTextarea.value = "Error: Image is not loaded properly, is invalid, or has zero dimensions.";
        errorTextarea.readOnly = true;
        errorTextarea.style.width = '100%';
        errorTextarea.style.height = '100px';
        errorTextarea.style.color = 'red'; // Visually indicate an error
        errorTextarea.setAttribute('aria-label', 'Error message');
        return errorTextarea;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // Draw the image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This catch block handles errors that might occur during drawImage,
        // for example, with certain types of SVGs or if the image is corrupted.
        const errorTextarea = document.createElement('textarea');
        errorTextarea.value = `Error: Could not draw the image on the canvas. ${e.message}`;
        errorTextarea.readOnly = true;
        errorTextarea.style.width = '100%';
        errorTextarea.style.height = '100px';
        errorTextarea.style.color = 'red';
        errorTextarea.setAttribute('aria-label', 'Error message');
        return errorTextarea;
    }

    // Get pixel data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This primarily catches SecurityError if the image is cross-origin and taints the canvas.
        const errorTextarea = document.createElement('textarea');
        let message = `Error: Could not get image data from the canvas. ${e.message}`;
        if (e.name === 'SecurityError') {
            message += ` This is likely due to cross-origin restrictions. If you are loading an image from a different domain, ensure it has appropriate CORS headers.`;
        }
        errorTextarea.value = message;
        errorTextarea.readOnly = true;
        errorTextarea.style.width = '100%';
        // Adjust height for the potentially longer cross-origin error message
        errorTextarea.style.height = (e.name === 'SecurityError') ? '150px' : '100px';
        errorTextarea.style.color = 'red';
        errorTextarea.setAttribute('aria-label', 'Error message');
        return errorTextarea;
    }

    const data = imageData.data; // This is a Uint8ClampedArray: [R1,G1,B1,A1, R2,G2,B2,A2, ...]
    const hexCodes = [];

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // const a = data[i + 3]; // Alpha component, typically not included in basic #RRGGBB hex codes

        // Convert RGB components to two-digit hex strings
        const rHex = r.toString(16).padStart(2, '0');
        const gHex = g.toString(16).padStart(2, '0');
        const bHex = b.toString(16).padStart(2, '0');

        hexCodes.push(`#${rHex}${gHex}${bHex}`);
    }

    // Create a textarea element to display the hex codes
    const outputTextarea = document.createElement('textarea');
    
    if (hexCodes.length === 0) {
        // This case should ideally be caught by earlier checks (e.g., 0-dimension image),
        // but as a fallback, if no hex codes were generated.
        outputTextarea.value = "No pixel data could be extracted. The image might be empty or in an unsupported format for canvas processing.";
        outputTextarea.style.height = '100px';
    } else {
        outputTextarea.value = hexCodes.join('\n'); // Newline-separated list of hex codes
        outputTextarea.style.height = '300px'; // A reasonable default height for scrollable content
    }
    
    outputTextarea.readOnly = true; // User should not edit the generated codes here
    outputTextarea.style.width = '100%'; // Make it responsive to container width
    outputTextarea.style.fontFamily = 'monospace'; // Monospace font for better readability of codes
    outputTextarea.setAttribute('aria-label', 'Hex color codes from image'); // Accessibility

    return outputTextarea;
}