Image Polished Steel Filter Effect

function processImage(originalImg, contrastPercent = 180, brightnessPercent = 110, reflectionStyle = "diagonalHighlight", reflectionOpacity = 0.25) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for images that might not be in the DOM yet or have CSS scaling
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // If the image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas.
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image Polished Steel Filter: Original image has zero dimensions. Ensure the image is loaded and valid.");
        // Optionally, draw a placeholder or throw an error
        // For now, return the empty (but sized) canvas if dimensions were 0 initially,
        // or a 0x0 canvas if imgWidth/Height are also 0.
        return canvas;
    }

    // Step 1: Apply base grayscale, contrast, and brightness to the image.
    // The ctx.filter property applies CSS-like filters to drawing operations.
    ctx.filter = `grayscale(100%) contrast(${contrastPercent}%) brightness(${brightnessPercent}%)`;
    
    // Draw the original image onto the canvas. The filter will be applied during this operation.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    // Reset the filter to 'none' so it doesn't affect subsequent drawing operations (like the gradient).
    ctx.filter = 'none';

    // Step 2: Add a "polished" sheen or reflection overlay.
    // Ensure reflectionOpacity is within a valid range (0 to 1).
    const validOpacity = Math.max(0, Math.min(1, reflectionOpacity));

    if (reflectionStyle !== "none" && validOpacity > 0) {
        // Set the global alpha for the gradient drawing. This controls the intensity of the sheen.
        ctx.globalAlpha = validOpacity;
        
        // 'soft-light' blending mode often works well for subtle highlights.
        // 'overlay' can be used for a stronger effect.
        ctx.globalCompositeOperation = 'soft-light'; 

        let gradient;

        if (reflectionStyle === "diagonalHighlight") {
            // Creates a diagonal highlight band across the image.
            // Gradient runs from top-left to bottom-right.
            gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            // Define opaque colors for gradient stops; globalAlpha controls overall transparency.
            // This creates a sharp highlight band.
            gradient.addColorStop(0,    '#505050'); // Darker gray area
            gradient.addColorStop(0.46, '#707070'); // Transition to highlight
            gradient.addColorStop(0.49, '#FFFFFF'); // Bright white highlight (leading edge)
            gradient.addColorStop(0.51, '#FFFFFF'); // Bright white highlight (trailing edge)
            gradient.addColorStop(0.54, '#707070'); // Transition from highlight
            gradient.addColorStop(1,    '#505050'); // Darker gray area
        } else if (reflectionStyle === "topLight") {
            // Simulates light coming predominantly from the top.
            gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); // Vertical gradient
            gradient.addColorStop(0,    '#FFFFFF'); // Brightest at the top
            gradient.addColorStop(0.3,  '#CCCCCC'); // Transition to mid-tones
            gradient.addColorStop(0.6,  '#888888'); // Darker mid-tones
            gradient.addColorStop(1,    '#555555'); // Darkest at the bottom (for the reflection)
        } else if (reflectionStyle === "curvedHighlight") {
            // Simulates a highlight on a curved surface using a radial gradient.
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            // The highlight will be stronger in the center and fade outwards.
            // Inner radius (fully bright) and outer radius (where fade ends).
            const innerRadius = Math.min(canvas.width, canvas.height) * 0.05; // Small bright core
            const outerRadius = Math.min(canvas.width, canvas.height) * 0.6;  // Extent of the highlight

            gradient = ctx.createRadialGradient(
                centerX, centerY, innerRadius, 
                centerX, centerY, outerRadius
            );
            gradient.addColorStop(0,   '#FFFFFF'); // Center of highlight (bright white)
            gradient.addColorStop(0.5, '#DDDDDD'); // Mid-point of highlight (lighter gray)
            gradient.addColorStop(1,   '#888888'); // Edge of highlight (darker gray)
        }

        if (gradient) {
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        // Reset global composite operation and alpha to their default values.
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 1.0;
    }

    return canvas;
}