Image UV Accessibility Converter

/**
 * Converts an image to make it more accessible for people with common
 * color vision deficiencies. It uses a Daltonization algorithm to enhance
 * color contrasts for specific types of color blindness.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} deficiencyType The type of color vision deficiency to correct for. 
 *   Can be 'deuteranopia', 'protanopia', 'tritanopia', or 'grayscale'.
 * @returns {HTMLCanvasElement} A canvas element with the processed image.
 */
async function processImage(originalImg, deficiencyType = 'deuteranopia') {

    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can provide a performance boost for repeated pixel manipulation.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure the canvas is the same size as the original image's intrinsic dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // If no correction is needed, return the canvas as-is.
    if (!deficiencyType || deficiencyType === 'none') {
        return canvas;
    }

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Handle grayscale separately as it's a simple conversion
    if (deficiencyType === 'grayscale') {
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            // Use the luminosity method for a standard grayscale conversion
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;
            data[i] = data[i + 1] = data[i + 2] = gray;
        }
        ctx.putImageData(imageData, 0, 0);
        return canvas;
    }

    // Standard matrices to simulate different types of color vision deficiency.
    // These transform a normal RGB color into how it would be perceived.
    const simulationMatrices = {
        protanopia: [ // Red-weakness
            0.567, 0.433, 0,
            0.558, 0.442, 0,
            0, 0.242, 0.758
        ],
        deuteranopia: [ // Green-weakness
            0.625, 0.375, 0,
            0.7, 0.3, 0,
            0, 0.3, 0.7
        ],
        tritanopia: [ // Blue-weakness
            0.95, 0.05, 0,
            0, 0.433, 0.567,
            0, 0.475, 0.525
        ]
    };

    const simMatrix = simulationMatrices[deficiencyType];

    // If the deficiency type is not valid, return the original image.
    if (!simMatrix) {
        console.warn(`Unknown deficiencyType: "${deficiencyType}". Returning original image.`);
        return canvas;
    }

    // Iterate through every pixel of the image
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // 1. Simulate how a person with the deficiency sees the color
        const r_sim = simMatrix[0] * r + simMatrix[1] * g + simMatrix[2] * b;
        const g_sim = simMatrix[3] * r + simMatrix[4] * g + simMatrix[5] * b;
        const b_sim = simMatrix[6] * r + simMatrix[7] * g + simMatrix[8] * b;

        // 2. Calculate the "error" or the difference between the original and simulated colors.
        // This represents the color information that is lost to the viewer.
        const r_err = r - r_sim;
        const g_err = g - g_sim;
        const b_err = b - b_sim;

        // 3. Adjust the original color by adding the lost information back in channels that ARE visible.
        // This heuristic shifts the "error" to channels the user can perceive, enhancing differentiation.
        let r_adj, g_adj, b_adj;

        switch (deficiencyType) {
            case 'protanopia': // Red-blind: shift the lost red information to the brightness of other channels.
                r_adj = r;
                g_adj = g + r_err * 0.7;
                b_adj = b + r_err * 0.7;
                break;
            case 'deuteranopia': // Green-blind: shift the lost green information to other channels.
                r_adj = r + g_err * 0.7;
                g_adj = g;
                b_adj = b + g_err * 0.7;
                break;
            case 'tritanopia': // Blue-blind: shift the lost blue information into the red channel.
                r_adj = r + b_err * 0.9;
                g_adj = g + b_err * 0.3; // Also add a bit to green to avoid a pure purple shift
                b_adj = b;
                break;
        }

        // Clamp the values to ensure they stay within the valid 0-255 range
        data[i] = Math.max(0, Math.min(255, r_adj));
        data[i + 1] = Math.max(0, Math.min(255, g_adj));
        data[i + 2] = Math.max(0, Math.min(255, b_adj));
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}