Image LAB Color Viewer

function processImage(originalImg) {
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif'; // A common, readable font
    container.style.padding = '10px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '5px';
    container.style.display = 'inline-block'; // To make the container wrap its content

    const canvas = document.createElement('canvas');
    // Ensure originalImg is loaded, otherwise naturalWidth/Height might be 0
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        console.error("Image is not fully loaded or has zero dimensions.");
        const errorMsg = document.createElement('p');
        errorMsg.textContent = "Error: Image not loaded or invalid.";
        errorMsg.style.color = 'red';
        container.appendChild(errorMsg);
        return container;
    }
    
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    canvas.style.border = '1px solid #000'; // Add a border to the canvas itself
    canvas.style.cursor = 'crosshair';

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    const displayDiv = document.createElement('div');
    displayDiv.style.marginTop = '10px';
    displayDiv.style.fontSize = '14px';
    displayDiv.style.lineHeight = '1.6';
    displayDiv.innerHTML = `
        <div style="font-weight: bold; margin-bottom: 5px;">Pixel Information:</div>
        <div>Coordinates: (X: <span id="mouse-x">-</span>, Y: <span id="mouse-y">-</span>)</div>
        <div>RGB: (R: <span id="rgb-r">-</span>, G: <span id="rgb-g">-</span>, B: <span id="rgb-b-val">-</span>)</div>
        <div style="margin-top:5px; font-weight: bold;">CIELAB (D65):</div>
        <div>L*: <span id="lab-l">-</span></div>
        <div>a*: <span id="lab-a">-</span></div>
        <div>b*: <span id="lab-b-val">-</span></div>
    `;

    container.appendChild(canvas);
    container.appendChild(displayDiv);

    const mouseXSpan = displayDiv.querySelector('#mouse-x');
    const mouseYSpan = displayDiv.querySelector('#mouse-y');
    const rgbRSpan = displayDiv.querySelector('#rgb-r');
    const rgbGSpan = displayDiv.querySelector('#rgb-g');
    const rgbBSpan = displayDiv.querySelector('#rgb-b-val'); // Matched ID
    const labLSpan = displayDiv.querySelector('#lab-l');
    const labASpan = displayDiv.querySelector('#lab-a');
    const labBSpan = displayDiv.querySelector('#lab-b-val'); // Matched ID

    // Constants for sRGB to XYZ and XYZ to LAB (D65 illuminant)
    const Xn_D65 = 0.95047;
    const Yn_D65 = 1.00000;
    const Zn_D65 = 1.08883;

    const delta = 6 / 29;
    const delta_cubed = delta * delta * delta; // (6/29)^3
    const term_factor = 1 / (3 * delta * delta); // 1 / (3 * (6/29)^2)
    const term_const = 4 / 29;

    function srgbToLinear(component) {
        component = component / 255;
        if (component <= 0.04045) {
            return component / 12.92;
        } else {
            return Math.pow((component + 0.055) / 1.055, 2.4);
        }
    }

    function rgbToXyz(r, g, b) {
        const r_lin = srgbToLinear(r);
        const g_lin = srgbToLinear(g);
        const b_lin = srgbToLinear(b);

        const x = r_lin * 0.4124564 + g_lin * 0.3575761 + b_lin * 0.1804375;
        const y = r_lin * 0.2126729 + g_lin * 0.7151522 + b_lin * 0.0721750;
        const z = r_lin * 0.0193339 + g_lin * 0.1191920 + b_lin * 0.9503041;
        return { x, y, z };
    }

    function xyz_to_lab_component_transform(t) {
        if (t > delta_cubed) {
            return Math.pow(t, 1 / 3);
        } else {
            return t * term_factor + term_const;
        }
    }

    function xyzToLab(x, y, z) {
        const xr = x / Xn_D65;
        const yr = y / Yn_D65;
        const zr = z / Zn_D65;

        const fx = xyz_to_lab_component_transform(xr);
        const fy = xyz_to_lab_component_transform(yr);
        const fz = xyz_to_lab_component_transform(zr);

        const l_star = (116 * fy) - 16;
        const a_star = 500 * (fx - fy);
        const b_star = 200 * (fy - fz);

        return { l: l_star, a: a_star, b: b_star };
    }
    
    canvas.addEventListener('mousemove', function(event) {
        const rect = canvas.getBoundingClientRect();
        const x = Math.floor(event.clientX - rect.left);
        const y = Math.floor(event.clientY - rect.top);

        // Ensure coordinates are within canvas bounds
        if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
            // Could clear values here, or just let mouseout handle it
            return;
        }

        try {
            const pixelData = ctx.getImageData(x, y, 1, 1).data;
            const r = pixelData[0];
            const g = pixelData[1];
            const b_component = pixelData[2]; // Using b_component to avoid clash with lab.b

            mouseXSpan.textContent = x;
            mouseYSpan.textContent = y;
            rgbRSpan.textContent = r;
            rgbGSpan.textContent = g;
            rgbBSpan.textContent = b_component;

            const { x: xyz_x, y: xyz_y, z: xyz_z } = rgbToXyz(r, g, b_component);
            const { l, a, b: lab_b_star } = xyzToLab(xyz_x, xyz_y, xyz_z); // Using lab_b_star

            labLSpan.textContent = l.toFixed(2);
            labASpan.textContent = a.toFixed(2);
            labBSpan.textContent = lab_b_star.toFixed(2);

        } catch (e) {
            if (!canvas.dataset.corsErrorShown) { // Use dataset for custom attributes
                console.error("Error getting pixel data for LAB conversion:", e);
                const errorP = document.createElement('p');
                errorP.style.color = 'red';
                errorP.style.fontWeight = 'bold';
                errorP.textContent = "Cannot inspect pixel data. The image might be cross-origin with no CORS policy, or the canvas is tainted.";
                displayDiv.innerHTML = ''; // Clear previous content
                displayDiv.appendChild(errorP);
                canvas.dataset.corsErrorShown = 'true'; 
            }
        }
    });
    
    canvas.addEventListener('mouseout', function() {
        // Clear values when mouse leaves canvas
        mouseXSpan.textContent = '-';
        mouseYSpan.textContent = '-';
        rgbRSpan.textContent = '-';
        rgbGSpan.textContent = '-';
        rgbBSpan.textContent = '-'; // Matched ID
        labLSpan.textContent = '-';
        labASpan.textContent = '-';
        labBSpan.textContent = '-'; // Matched ID
    });

    return container;
}