Image UV Filter Effect Tool

function processImage(originalImg, pContrast = "1.05", pSaturation = "1.05", pBlueBoost = "1.03") {
    // Basic check to see if the image has dimensions.
    // An image object might exist but not be fully loaded or be invalid.
    if (!originalImg || typeof originalImg.naturalWidth === 'undefined' || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Image not loaded, invalid, or has zero dimensions.");
        // Return a minimal canvas as a fallback.
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = 1;
        fallbackCanvas.height = 1;
        const fallbackCtx = fallbackCanvas.getContext('2d');
        if (fallbackCtx) { // Ensure context is available
            fallbackCtx.fillStyle = 'red'; // Indicate error
            fallbackCtx.fillRect(0, 0, 1, 1);
        }
        return fallbackCanvas;
    }

    const canvas = document.createElement('canvas');
    // Use willReadFrequently for potential performance optimization when using getImageData/putImageData.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Parse string parameters to numbers, with default fallbacks for invalid inputs
    let contrastFactor = parseFloat(pContrast);
    if (isNaN(contrastFactor)) {
        console.warn(`Invalid pContrast value: "${pContrast}". Defaulting to 1.05.`);
        contrastFactor = 1.05;
    }

    let saturationFactor = parseFloat(pSaturation);
    if (isNaN(saturationFactor)) {
        console.warn(`Invalid pSaturation value: "${pSaturation}". Defaulting to 1.05.`);
        saturationFactor = 1.05;
    }
    
    let blueBoostFactor = parseFloat(pBlueBoost);
    if (isNaN(blueBoostFactor)) {
        console.warn(`Invalid pBlueBoost value: "${pBlueBoost}". Defaulting to 1.03.`);
        blueBoostFactor = 1.03;
    }

    // Ensure factors are non-negative to prevent undesired inversions or extreme effects.
    contrastFactor = Math.max(0, contrastFactor);
    saturationFactor = Math.max(0, saturationFactor);
    blueBoostFactor = Math.max(0, blueBoostFactor);

    // Iterate over each pixel (each pixel consists of 4 values: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. Apply Contrast
        // This formula adjusts color components relative to the midpoint (128).
        r = (r - 128) * contrastFactor + 128;
        g = (g - 128) * contrastFactor + 128;
        b = (b - 128) * contrastFactor + 128;

        // Clamp values after contrast adjustment. This is important so that
        // subsequent calculations (like luminance for saturation) operate on valid 0-255 range values.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));
        
        // 2. Apply Saturation
        // Calculate luminance using standard coefficients for perceived brightness.
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;
        // Interpolate between the luminance (grayscale version) and the color.
        // A saturationFactor > 1 increases saturation, < 1 decreases it.
        r = lum + (r - lum) * saturationFactor;
        g = lum + (g - lum) * saturationFactor;
        b = lum + (b - lum) * saturationFactor;

        // Clamp values after saturation adjustment.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 3. Apply Blue Boost
        // Increase the blue component.
        b = b * blueBoostFactor;
        // No specific clamping for 'b' is strictly needed here, as the final assignment
        // to the Uint8ClampedArray 'data' will handle clamping. However, if 'b' were
        // used in further calculations before assignment, clamping might be advisable.

        // Store the modified RGB values back into the image data array.
        // The Uint8ClampedArray automatically clamps values to the 0-255 range
        // and converts them to integers (typically by rounding half to even).
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
        // Alpha channel (data[i+3]) remains unchanged.
    }

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

    return canvas;
}