Image Tintype Filter Effect Tool

async function processImage(originalImg, tintIntensityStr = "0.6", contrastLevelStr = "60", vignetteStrengthStr = "0.7", noiseAmountStr = "20") {
    // Parse parameters to numbers
    const p_tintIntensity = parseFloat(tintIntensityStr); // Range: 0.0 (no tint) to 1.0 (full tint)
    const p_contrast = parseFloat(contrastLevelStr);     // Range: 0 (no change) to 100 (high contrast)
    const p_vignetteStrength = parseFloat(vignetteStrengthStr); // Range: 0.0 (no vignette) to 1.0 (strong vignette)
    const p_noiseAmount = parseFloat(noiseAmountStr);   // Range: 0 (no noise) to e.g. 50 (moderate noise)

    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height to get the original image dimensions
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;
    const ctx = canvas.getContext('2d');

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

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

    // Contrast factor calculation
    // p_contrast = 0 means factor is 1 (no change).
    // p_contrast = 100 means factor is approx 2.26 (increased contrast).
    // The formula for contrast adjustment: NewValue = factor * (OldValue - 128) + 128
    const contrastFactor = (259 * (p_contrast + 255)) / (255 * (259 - p_contrast));

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    // Maximum distance from center to a corner, used for normalizing vignette effect.
    const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);

    // Tint target multiplicative factors (applied when p_tintIntensity = 1.0)
    // These values aim for a warm, slightly brownish-yellow tint, characteristic of some tintypes.
    const R_TINT_TARGET_FACTOR = 1.15; // Emphasize Red
    const G_TINT_TARGET_FACTOR = 1.08; // Slightly Emphasize Green
    const B_TINT_TARGET_FACTOR = 0.85; // Reduce Blue to achieve a warmer, brownish tone

    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 to grayscale (Luminosity method)
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply Tint
        // Linearly interpolate between grayscale (no tint) and a fully tinted version of grayscale.
        // r_tinted = gray * mixed_factor_for_R, where mixed_factor is interpolated.
        let r_tinted = gray * (1 * (1 - p_tintIntensity) + R_TINT_TARGET_FACTOR * p_tintIntensity);
        let g_tinted = gray * (1 * (1 - p_tintIntensity) + G_TINT_TARGET_FACTOR * p_tintIntensity);
        let b_tinted = gray * (1 * (1 - p_tintIntensity) + B_TINT_TARGET_FACTOR * p_tintIntensity);

        // 3. Apply Contrast
        let r_contrasted = contrastFactor * (r_tinted - 128) + 128;
        let g_contrasted = contrastFactor * (g_tinted - 128) + 128;
        let b_contrasted = contrastFactor * (b_tinted - 128) + 128;

        // 4. Apply Vignette
        const currentX = (i / 4) % canvas.width;
        const currentY = Math.floor((i / 4) / canvas.width);
        const dx = currentX - centerX;
        const dy = currentY - centerY;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        let normalizedDistance = 0;
        if (maxDistance > 0) { // Avoid division by zero for very small images (e.g., 1x1)
            normalizedDistance = distance / maxDistance;
        }
        
        // vignettePower controls the falloff curve of the vignette. Higher = sharper/quicker falloff.
        const vignettePower = 1.5; 
        // brightnessMultiplier will be 1 at center, decreasing towards edges.
        const brightnessMultiplier = 1.0 - Math.pow(normalizedDistance, vignettePower) * p_vignetteStrength;
        
        let r_vignetted = r_contrasted * brightnessMultiplier;
        let g_vignetted = g_contrasted * brightnessMultiplier;
        let b_vignetted = b_contrasted * brightnessMultiplier;

        // 5. Apply Noise
        // Generates noise typically in the range of -p_noiseAmount/2 to +p_noiseAmount/2
        const noise = (Math.random() - 0.5) * p_noiseAmount;
        let r_final = r_vignetted + noise;
        let g_final = g_vignetted + noise;
        let b_final = b_vignetted + noise;
        
        // Clamp final RGB values to the valid [0, 255] range
        data[i] = Math.max(0, Math.min(255, r_final));
        data[i + 1] = Math.max(0, Math.min(255, g_final));
        data[i + 2] = Math.max(0, Math.min(255, b_final));
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    return canvas;
}