Image Chrome Reflection Filter Effect Tool

function processImage(originalImg, intensity = 0.5) { // intensity: 0 (results in grayscale) to 1 (max chrome effect)
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg is a valid, loaded image with dimensions.
    // If not, return an empty or minimally sized canvas.
    if (!originalImg || typeof originalImg.width !== 'number' || typeof originalImg.height !== 'number' || originalImg.width === 0 || originalImg.height === 0) {
        canvas.width = (originalImg && typeof originalImg.width === 'number' && originalImg.width > 0) ? originalImg.width : 1;
        canvas.height = (originalImg && typeof originalImg.height === 'number' && originalImg.height > 0) ? originalImg.height : 1;
        // console.error("ImageChromeReflectionFilter: Provided image is invalid or has zero dimensions. Returning a placeholder canvas.");
        return canvas; 
    }
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    try {
        // Draw the original image onto the canvas
        ctx.drawImage(originalImg, 0, 0, originalImg.width, originalImg.height);
        
        // Get the pixel data from the canvas
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        // Clamp the intensity parameter to the range [0, 1] to ensure predictable behavior.
        const clampedIntensity = Math.max(0, Math.min(1, intensity));

        // Calculate curveSteepness 'k' for the S-curve based on intensity.
        // intensity = 0      => k = 1.0 (linear mapping, i.e., grayscale only)
        // intensity = 0.5    => k = 3.0 (moderate S-curve contrast, default)
        // intensity = 1      => k = 5.0 (high S-curve contrast)
        const curveSteepness = 1.0 + clampedIntensity * 4.0;

        // Iterate over each pixel
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i+1];
            const b = data[i+2];

            // Calculate luminance (using Rec. 709 standard for grayscale conversion)
            // L = 0.2126*R + 0.7152*G + 0.0722*B
            const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
            
            // Normalize luminance to the [0, 1] range
            let normLum = lum / 255.0;
            // Clamp normLum to be absolutely sure it's within [0, 1],
            // though it should be by calculation if R,G,B are in [0, 255].
            normLum = Math.max(0.0, Math.min(1.0, normLum)); 

            let processedLumNorm;

            if (curveSteepness === 1.0) { // Corresponds to clampedIntensity = 0
                processedLumNorm = normLum; // Linear mapping, results in simple grayscale
            } else if (normLum === 0.0 || normLum === 1.0) { // Endpoints of the curve remain fixed
                processedLumNorm = normLum; // 0 remains 0, 1 remains 1
            } else {
                // Apply S-curve for contrast enhancement: f(x) = x^k / (x^k + (1-x)^k)
                // This formula maps [0,1] to [0,1], pivoting around (0.5, 0.5).
                // k > 1 increases contrast, making highlights brighter and shadows darker.
                const powXk = Math.pow(normLum, curveSteepness);
                const pow1minusXk = Math.pow(1.0 - normLum, curveSteepness);
                
                // The denominator (powXk + pow1minusXk) is guaranteed to be positive
                // if 0 < normLum < 1 and curveSteepness >= 1.
                processedLumNorm = powXk / (powXk + pow1minusXk);
            }
            
            // Convert normalized luminance back to [0, 255] scale
            const finalVal = Math.round(processedLumNorm * 255);

            // Apply the new grayscale value to R, G, B channels for the chrome effect
            data[i] = finalVal;     // Red
            data[i+1] = finalVal; // Green
            data[i+2] = finalVal; // Blue
            // Alpha channel (data[i+3]) is preserved
        }

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

    } catch (e) {
        // This catch block handles errors primarily from ctx.getImageData().
        // This can occur if the canvas is tainted (e.g., drawing a cross-origin image
        // without CORS approval).
        console.error("Error applying chrome reflection filter:", e);
        // If an error occurs, ctx.drawImage might have still worked.
        // The canvas returned would contain the original image without the filter.
        // If originalImg was problematic from the start, the canvas might be empty or 1x1 (placeholder).
    }
    
    return canvas;
}