Image Telegram Paper Filter Effect Generator

async function processImage(originalImg, desaturationLevel = 0.6, paperTintStrength = 0.2, grainAmount = 15, brightnessAdjust = 10) {
    // Coerce parameters to numbers and validate their ranges
    desaturationLevel = Number(desaturationLevel);
    paperTintStrength = Number(paperTintStrength);
    grainAmount = Number(grainAmount);
    brightnessAdjust = Number(brightnessAdjust);

    // Clamp parameters to sensible ranges
    desaturationLevel = Math.max(0, Math.min(1, desaturationLevel)); // 0 (no desaturation) to 1 (full grayscale)
    paperTintStrength = Math.max(0, Math.min(1, paperTintStrength)); // 0 (no tint) to 1 (full tint effect)
    grainAmount = Math.max(0, Math.min(100, grainAmount));         // Noise value range (e.g., 0-50 is typical)
    brightnessAdjust = Math.max(-255, Math.min(255, brightnessAdjust)); // Pixel value offset

    const canvas = document.createElement('canvas');
    // Use willReadFrequently hint if available and appropriate, though not universally supported or always beneficial.
    // For this per-pixel manipulation, it's a reasonable hint.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

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

    if (canvas.width === 0 || canvas.height === 0) {
        // Handle cases where image might not be loaded or is invalid
        console.error("Image has zero width or height.");
        return canvas; // Return an empty canvas
    }

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

    // Get pixel data
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to canvas Tainted Cavas (CORS) issues if image is from another domain
        console.error("Could not get image data, canvas might be tainted: ", e);
        // Fallback: we can't process, so return canvas with original image (or handle error as preferred)
        return canvas;
    }
    
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha data[i+3] is typically left unchanged for this kind of filter

        // 1. Apply brightness adjustment
        r += brightnessAdjust;
        g += brightnessAdjust;
        b += brightnessAdjust;

        // 2. Apply desaturation
        // Calculate grayscale value (luminance)
        // Standard Rec. 709 luminance coefficients: 0.2126*R + 0.7152*G + 0.0722*B
        // Using common older ones: 0.299*R + 0.587*G + 0.114*B
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        // Interpolate between original color and grayscale based on desaturationLevel
        r = r * (1 - desaturationLevel) + gray * desaturationLevel;
        g = g * (1 - desaturationLevel) + gray * desaturationLevel;
        b = b * (1 - desaturationLevel) + gray * desaturationLevel;

        // 3. Apply paper tint
        // This aims for a light yellowish/brownish tone typical of aged paper.
        // We'll slightly increase red and green components, and decrease blue component.
        // The strength of this effect is controlled by paperTintStrength.
        // Factors for tinting: more red, slightly more green, less blue.
        const tintRfactor = 1 + (0.15 * paperTintStrength); // e.g. if strength is 1, r increases by 15%
        const tintGfactor = 1 + (0.10 * paperTintStrength); // e.g. if strength is 1, g increases by 10%
        const tintBfactor = 1 - (0.15 * paperTintStrength); // e.g. if strength is 1, b decreases by 15%

        r *= tintRfactor;
        g *= tintGfactor;
        b *= tintBfactor;
        
        // 4. Add grain/noise
        // Generate a random noise value (can be positive or negative)
        const noise = (Math.random() - 0.5) * grainAmount;
        r += noise;
        g += noise;
        b += noise;

        // Clamp values to the 0-255 range
        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)));
    }

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

    // Return the canvas element
    return canvas;
}