Image Fujifilm Neopan Filter Effect Tool

function processImage(originalImg, contrastParam = "1.8", grainAmountParam = "15") {
    // Parse string parameters to numbers, providing fallbacks for invalid inputs
    let contrast = parseFloat(contrastParam);
    let grainAmount = parseInt(grainAmountParam, 10);

    // Validate parsed contrast: should be a non-negative number. Default to 1.8 if invalid.
    if (isNaN(contrast) || contrast < 0) {
        contrast = 1.8;
    }

    // Validate parsed grain amount: should be a non-negative number. Default to 15 if invalid.
    // Cap grain amount to a reasonable maximum (e.g., 50) to prevent overly noisy images.
    if (isNaN(grainAmount) || grainAmount < 0) {
        grainAmount = 15;
    }
    grainAmount = Math.min(grainAmount, 50); // Cap grain amount

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

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // If the image has no dimensions (e.g., not loaded properly), return the empty canvas
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data; // Pixel data: [R, G, B, A, R, G, B, A, ...]

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // 1. Convert to grayscale using the luminosity method (Rec. 709)
        // These weights approximate human perception of brightness.
        let gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;

        // 2. Apply contrast adjustment
        // The formula new_value = (old_value - 128) * contrast_factor + 128
        // centers the adjustment around mid-gray (128).
        // A contrast_factor of 1.0 results in no change.
        // Values > 1.0 increase contrast, < 1.0 (but > 0) decrease it.
        gray = (gray - 128) * contrast + 128;

        // 3. Add film grain
        if (grainAmount > 0) {
            // Generate random noise between -grainAmount and +grainAmount
            const noise = (Math.random() * 2 - 1) * grainAmount;
            gray += noise;
        }

        // Clamp the resulting grayscale value to the valid range [0, 255]
        gray = Math.max(0, Math.min(255, gray));

        // Apply the new grayscale value to R, G, and B channels
        data[i] = gray;
        data[i + 1] = gray;
        data[i + 2] = gray;
        // Alpha channel (data[i + 3]) is preserved
    }

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

    return canvas;
}