Image Pearl Luster Filter Effect Tool

async function processImage(
    originalImg,
    blurAmount = 1, // in pixels, non-negative
    brightnessFactor = 1.1, // 1.0 is original, e.g., range 0.0 to 2.0+
    contrastFactor = 1.1,   // 1.0 is original, e.g., range 0.0 to 2.0+
    saturationFactor = 0.8, // 1.0 is original, 0.0 is grayscale, e.g., range 0.0 to 2.0+
    lusterColor = 'rgba(255, 248, 240, 0.2)', // Color of the luster overlay (e.g., light ivory). CSS color string.
    lusterBlendMode = 'soft-light' // Blend mode for the luster. CSS blend mode string.
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for pristine dimensions, fallback to width/height.
    // These are 0 if the image is not loaded or is invalid.
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    canvas.width = w;
    canvas.height = h;

    // If the image has no dimensions (e.g., not loaded or invalid), return a blank canvas.
    if (w === 0 || h === 0) {
        console.warn("Image has zero width or height. Ensure the image is loaded and valid.");
        return canvas; // Returns a 0x0 or blank canvas matching original's reported w/h
    }

    // Step 1: Apply base image adjustments (blur, brightness, contrast, saturation)
    // Construct the filter string. Browsers handle invalid parts gracefully (e.g., negative blur might be ignored or default to 0).
    // For robustness, ensure blurAmount is non-negative if strict behavior is needed, but typically CSS parsing is lenient.
    const effectiveBlurAmount = Math.max(0, blurAmount); // Ensure blur is not negative

    const filters = [
        `blur(${effectiveBlurAmount}px)`,
        `brightness(${brightnessFactor})`,
        `contrast(${contrastFactor})`,
        `saturate(${saturationFactor})`
    ];
    ctx.filter = filters.join(' ');

    // Draw the original image onto the canvas. It will be rendered with the filters applied.
    ctx.drawImage(originalImg, 0, 0, w, h);
    
    // Step 2: Reset filters before applying the luster overlay.
    // This is crucial so the luster overlay itself isn't affected by the image's filters.
    ctx.filter = 'none';

    // Step 3: Apply the luster overlay
    // Check if lusterColor is provided, not 'none', and not an empty string.
    if (lusterColor && lusterColor.toLowerCase() !== 'none' && lusterColor.trim() !== '') {
        // Set the blending mode for the overlay.
        // If lusterBlendMode is invalid, browser typically defaults to 'source-over'.
        ctx.globalCompositeOperation = lusterBlendMode;
        
        // Set the color and opacity for the overlay.
        // If lusterColor is invalid, browser typically defaults to transparent black.
        ctx.fillStyle = lusterColor;
        
        // Fill the entire canvas with the luster color
        ctx.fillRect(0, 0, w, h);

        // Reset globalCompositeOperation to default (good practice for any subsequent drawing operations)
        ctx.globalCompositeOperation = 'source-over';
    }
    
    return canvas;
}