Image Industrial Factory Filter Effect Tool

function processImage(originalImg, effectIntensity = 0.8) {
    // Parse and validate the effectIntensity parameter
    let currentEffectIntensity = Number(effectIntensity);
    if (isNaN(currentEffectIntensity)) {
        // If effectIntensity was not a valid number (e.g., a string like "abc"),
        // use the default value from the function signature (or re-specify if needed).
        // Here, effectIntensity is already set to its default if not provided,
        // so we're handling the case where it IS provided but is NaN.
        currentEffectIntensity = 0.8; 
    }
    // Clamp the intensity to the operational range [0, 1]
    currentEffectIntensity = Math.max(0, Math.min(1, currentEffectIntensity));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions from the original image.
    // It's assumed originalImg is a loaded HTMLImageElement or similar.
    // If naturalWidth/Height are 0 (e.g., image not loaded or invalid), canvas will be 0x0.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // If intensity is effectively 0, no visual change is needed beyond drawing the original.
    // The operations below would result in no change to pixel values if currentEffectIntensity is 0.
    // However, an explicit check can save processing if an exact 0 is passed.
    if (currentEffectIntensity === 0) {
        return canvas; // Return canvas with the original image drawn
    }

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Define base values for the filter components. These are the max effects at intensity = 1.
    const maxDesaturation = 0.9;          // Max 90% desaturation
    const maxContrastIncrease = 0.4;      // Max contrast factor will be 1.0 + 0.4 = 1.4
    const maxNoiseAmplitude = 20;         // Noise will range from -10 to +10 at full intensity
    const maxBlueBoost = 25;              // Max amount to add to blue channel
    const maxRedReduction = 10;           // Max amount to subtract from red channel
    // Optional: const maxGreenReduction = 5;  // Max amount to subtract from green channel

    // Iterate over each pixel (4 bytes: 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. Desaturation
        const desaturationLevel = maxDesaturation * currentEffectIntensity;
        if (desaturationLevel > 0) {
            const gray = (r * 0.299 + g * 0.587 + b * 0.114); // Luminance formula
            r = r * (1 - desaturationLevel) + gray * desaturationLevel;
            g = g * (1 - desaturationLevel) + gray * desaturationLevel;
            b = b * (1 - desaturationLevel) + gray * desaturationLevel;
        }

        // 2. Contrast
        const contrastFactor = 1.0 + (maxContrastIncrease * currentEffectIntensity);
        if (contrastFactor !== 1.0) {
            // Adjust pixel relative to midpoint (128)
            r = (r - 128) * contrastFactor + 128;
            g = (g - 128) * contrastFactor + 128;
            b = (b - 128) * contrastFactor + 128;
        }
        
        // 3. Cool Tint (Industrial Blue/Gray)
        const blueBoostAmount = maxBlueBoost * currentEffectIntensity;
        const redReductionAmount = maxRedReduction * currentEffectIntensity;
        // const greenReductionAmount = maxGreenReduction * currentEffectIntensity; // If using
        
        b += blueBoostAmount;
        r -= redReductionAmount;
        // g -= greenReductionAmount; // If using

        // 4. Noise/Grain
        const noiseLevel = maxNoiseAmplitude * currentEffectIntensity;
        if (noiseLevel > 0) {
            // Generate random noise value between -noiseLevel/2 and +noiseLevel/2
            const noiseVal = (Math.random() - 0.5) * noiseLevel;
            r += noiseVal;
            g += noiseVal;
            b += noiseVal;
        }

        // Clamp final RGB values to ensure they are within the valid [0, 255] range and are integers
        data[i] = Math.max(0, Math.min(255, Math.round(r)));
        data[i + 1] = Math.max(0, Math.min(255, Math.round(g)));
        data[i + 2] = Math.max(0, Math.min(255, Math.round(b)));
        // Alpha channel (data[i + 3]) remains unchanged
    }

    // Write the modified pixel data back to the canvas
    ctx.putImageData(imageData, 0, 0);
    
    return canvas;
}