Photo Cast Iron Texture Filter Effect

function processImage(originalImg, noiseIntensity = 30, contrastFactor = 1.5, darkeningFactor = 0.7) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Optimisation hint for frequent getImageData/putImageData

    // Set canvas dimensions to the original image's dimensions
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Loop through each pixel (each pixel has 4 values: 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. Desaturate the pixel (convert to grayscale using luminosity method)
        // Standard formula: 0.299*R + 0.587*G + 0.114*B
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply darkening factor
        // This makes the overall image darker, characteristic of cast iron
        gray *= darkeningFactor;

        // 3. Apply contrast
        // Formula: NewValue = Factor * (OldValue - 128) + 128
        // This pushes pixels away from mid-gray, making darks darker and lights lighter
        gray = contrastFactor * (gray - 128) + 128;

        // 4. Add noise for texture
        // Generate a random noise value between -noiseIntensity and +noiseIntensity
        const noise = (Math.random() * 2 - 1) * noiseIntensity;
        gray += noise;

        // 5. Clamp the final gray value to be within the 0-255 range
        const finalValue = Math.max(0, Math.min(255, gray));

        // Set the R, G, B channels to the new grayscale value
        data[i] = finalValue;     // Red
        data[i + 1] = finalValue; // Green
        data[i + 2] = finalValue; // Blue
        // Alpha channel (data[i+3]) remains unchanged
    }

    // Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas element
    return canvas;
}