Image Rusted Metal Filter Effect Tool

function processImage(
    originalImg,
    overallStrength = 0.9,
    noiseGrain = 20,
    colorRandomnessScale = 0.2,
    mainRustColorStr = "180,90,40"
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded before trying to get its dimensions
    if (!originalImg.complete || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        // Optionally, handle unloaded/empty image (e.g., return an empty canvas or throw error)
        // For now, let's proceed, it might draw an empty canvas if dims are 0.
        console.warn("Image Rusted Metal Filter: Original image is not fully loaded or has zero dimensions.");
    }

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    ctx.drawImage(originalImg, 0, 0);

    if (canvas.width === 0 || canvas.height === 0) {
        return canvas; // Return empty canvas if image was invalid
    }

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    const [baseR, baseG, baseB] = mainRustColorStr.split(',').map(Number);

    for (let i = 0; i < data.length; i += 4) {
        const origR = data[i];
        const origG = data[i + 1];
        const origB = data[i + 2];
        // Alpha channel (data[i+3]) is preserved

        // Calculate luminance of the original pixel
        const lum = 0.299 * origR + 0.587 * origG + 0.114 * origB;

        // Calculate randomized target rust color for this pixel
        // colorRandomnessScale (0-1): 0 means no randomness, 1 means +/- 100% variation from baseRustColor component
        const randFactorR = 1 + (Math.random() - 0.5) * 2 * colorRandomnessScale;
        const randFactorG = 1 + (Math.random() - 0.5) * 2 * colorRandomnessScale;
        const randFactorB = 1 + (Math.random() - 0.5) * 2 * colorRandomnessScale;

        let targetR = baseR * randFactorR;
        let targetG = baseG * randFactorG;
        let targetB = baseB * randFactorB;
        
        // Clamp target colors to be safe, though with typical colorRandomnessScale < 1, might not be strictly needed
        targetR = Math.min(255, Math.max(0, targetR));
        targetG = Math.min(255, Math.max(0, targetG));
        targetB = Math.min(255, Math.max(0, targetB));

        // Create the base "rusted" color.
        // This formula makes brighter original areas result in a brighter shade of the target rust color.
        let effectR = targetR * (0.7 + 0.3 * (lum / 255));
        let effectG = targetG * (0.7 + 0.3 * (lum / 255));
        let effectB = targetB * (0.7 + 0.3 * (lum / 255));

        // Add noise (grain) to the rust effect part
        // noiseGrain determines the amplitude of the noise (+/- noiseGrain)
        const noise = (Math.random() - 0.5) * noiseGrain * 2;
        
        let noisyEffectR = effectR + noise;
        let noisyEffectG = effectG + noise;
        let noisyEffectB = effectB + noise;

        // Blend original pixel color with the noisy "rusted" effect color
        // overallStrength (0-1): 0 means original image, 1 means fully rusted effect
        let finalR = origR * (1 - overallStrength) + noisyEffectR * overallStrength;
        let finalG = origG * (1 - overallStrength) + noisyEffectG * overallStrength;
        let finalB = origB * (1 - overallStrength) + noisyEffectB * overallStrength;

        // Clamp final RGB values to 0-255 range
        data[i]     = Math.min(255, Math.max(0, finalR));
        data[i + 1] = Math.min(255, Math.max(0, finalG));
        data[i + 2] = Math.min(255, Math.max(0, finalB));
        // data[i+3] (alpha) remains unchanged
    }

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