Image Pull Processing Filter Effect Tool

function processImage(originalImg, contrastLevel = 0.6, saturationLevel = 0.8, brightnessOffset = -10) {
    // Sanitize and parse parameters
    // Parameter: contrastLevel
    // Default: 0.6 (40% reduction from normal contrast towards midpoint)
    // Range: >= 0. Values < 1 reduce contrast, > 1 increase contrast. 1 is no change.
    let p_contrastLevel = parseFloat(String(contrastLevel));
    if (isNaN(p_contrastLevel)) {
        p_contrastLevel = 0.6; // Fallback to default if parsing fails (e.g., invalid string)
    } else {
        p_contrastLevel = Math.max(0, p_contrastLevel); // Negative contrast inverts, usually not desired
    }

    // Parameter: saturationLevel
    // Default: 0.8 (20% reduction in saturation)
    // Range: >= 0. Values < 1 desaturate, > 1 "oversaturate". 1 is no change. 0 is grayscale.
    let p_saturationLevel = parseFloat(String(saturationLevel));
    if (isNaN(p_saturationLevel)) {
        p_saturationLevel = 0.8; // Fallback to default
    } else {
        p_saturationLevel = Math.max(0, p_saturationLevel); // Negative saturation inverts colors weirdly, prevent
    }

    // Parameter: brightnessOffset
    // Default: -10 (slightly darker)
    // Range: Typically -255 to 255.
    let p_brightnessOffset = parseFloat(String(brightnessOffset));
    if (isNaN(p_brightnessOffset)) {
        p_brightnessOffset = -10; // Fallback to default
    } else {
        // Clamp to a reasonable range to prevent extreme shifts leading to fully black/white images
        p_brightnessOffset = Math.max(-255, Math.min(255, p_brightnessOffset));
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Optimizes for frequent getImageData/putImageData

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // If image dimensions are invalid, return an empty (but correctly sized if possible) canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero width or height.");
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen if the image is tainted (e.g., cross-origin)
        // and canvas operations are restricted.
        console.error("Error getting ImageData, possibly due to tainted canvas:", e);
        // Return the canvas with the original image drawn, as filtering cannot be applied.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    // Standard luminance coefficients for RGB to grayscale conversion
    const lumR = 0.299;
    const lumG = 0.587;
    const lumB = 0.114;

    // Small epsilon for float comparisons to avoid unnecessary calculations
    const epsilon = 1e-6;

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha channel (data[i+3]) is preserved

        // 1. Apply Brightness Offset
        if (p_brightnessOffset !== 0) { // Optimization
            r += p_brightnessOffset;
            g += p_brightnessOffset;
            b += p_brightnessOffset;
            // Note: Intermediate values r,g,b can go outside [0,255] here.
            // This is fine as they are floats and will be clamped at the end by Uint8ClampedArray.
            // If these intermediate values were used in calculations sensitive to current range (e.g. non-linear curves),
            // intermediate clamping might be needed:
            // r = Math.max(0, Math.min(255, r)); g = ...; b = ...;
        }

        // 2. Adjust Contrast
        // For "pull processing", contrast is typically reduced (p_contrastLevel < 1.0).
        if (Math.abs(p_contrastLevel - 1.0) > epsilon) { // Optimization: skip if no change
            r = 128 + (r - 128) * p_contrastLevel;
            g = 128 + (g - 128) * p_contrastLevel;
            b = 128 + (b - 128) * p_contrastLevel;
        }
        
        // 3. Adjust Saturation
        // For "pull processing", saturation is typically reduced (p_saturationLevel < 1.0).
        if (Math.abs(p_saturationLevel - 1.0) > epsilon) { // Optimization: skip if no change
            // Calculate perceived brightness (luminance) using current r,g,b values
            const gray = lumR * r + lumG * g + lumB * b;
            
            // Lerp (linear interpolate) between grayscale and original color
            r = gray + (r - gray) * p_saturationLevel;
            g = gray + (g - gray) * p_saturationLevel;
            b = gray + (b - gray) * p_saturationLevel;
        }

        // Assign modified RGB values back.
        // Uint8ClampedArray automatically clamps values to the 0-255 range.
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}