Image Grainy Government File Filter

/**
 * Applies a filter to an image to make it look like a grainy, classified government file.
 * This is achieved by adjusting contrast, desaturating, adding monochrome noise, and applying a subtle tint.
 * 
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} grainAmount The intensity of the grain effect. Recommended range: 0.0 to 1.0. Default is 0.15.
 * @param {number} desaturateAmount The amount of desaturation to apply. 0 is original color, 1 is full grayscale. Default is 0.8.
 * @param {number} contrastAmount The amount of contrast to apply. 1 is original contrast. Default is 1.5.
 * @param {string} tintColor The CSS color string for the tint overlay (e.g., '#f0e6d6' for an aged paper look). Default is '#f0e6d6'.
 * @param {number} tintOpacity The opacity of the tint overlay. Recommended range: 0.0 to 1.0. Default is 0.2.
 * @returns {HTMLCanvasElement} A canvas element with the filtered image.
 */
function processImage(originalImg, grainAmount = 0.15, desaturateAmount = 0.8, contrastAmount = 1.5, tintColor = '#f0e6d6', tintOpacity = 0.2) {
    // Get image dimensions
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    // Create a canvas
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // --- Step 1: Apply baseline filters (desaturation and contrast) ---
    // Clamp parameters to sensible ranges to prevent errors or extreme results
    const saturation = Math.max(0, 1 - Math.min(1, desaturateAmount));
    const contrast = Math.max(0, contrastAmount);

    ctx.filter = `saturate(${saturation}) contrast(${contrast})`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    
    // Reset the filter so it doesn't affect subsequent operations
    ctx.filter = 'none';

    // --- Step 2: Add monochrome grain ---
    const finalGrainAmount = Math.max(0, Math.min(1, grainAmount));
    if (finalGrainAmount > 0) {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        const grainStrength = 255 * finalGrainAmount;

        for (let i = 0; i < data.length; i += 4) {
            // Generate a single random value for R, G, B to simulate monochrome film grain
            const grain = (Math.random() - 0.5) * grainStrength;

            // Add grain and clamp the values between 0 and 255
            data[i] = Math.max(0, Math.min(255, data[i] + grain));
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + grain));
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + grain));
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // --- Step 3: Apply a subtle tint overlay ---
    const finalTintOpacity = Math.max(0, Math.min(1, tintOpacity));
    if (finalTintOpacity > 0 && tintColor) {
        ctx.globalAlpha = finalTintOpacity;
        ctx.fillStyle = tintColor;
        // Use 'multiply' for a more authentic document-aging blend mode
        ctx.globalCompositeOperation = 'multiply';
        ctx.fillRect(0, 0, w, h);
    }

    return canvas;
}