Image 70s Photo Filter

function processImage(originalImg,
                        sepiaLevel = 0.25,      // Range: 0.0 to 1.0. Intensity of the sepia effect.
                        saturationLevel = 0.85, // Range: 0.0 (grayscale) to N.0 (e.g., 2.0 for double saturation). 1.0 is original.
                        contrastLevel = 1.1,    // Range: 0.0 (solid gray) to N.0. 1.0 is original.
                        brightnessLevel = 1.0,  // Range: 0.0 (black) to N.0. 1.0 is original.
                        tintColorRGB = "240,190,100", // String representing RGB values for the tint, e.g., "240,190,100" for a golden ochre.
                        tintOpacity = 0.2,      // Range: 0.0 (no tint) to 1.0 (full tint color as defined by tintColorRGB).
                        tintBlendMode = "soft-light" // Canvas globalCompositeOperation mode for applying the tint. Common choices: 'soft-light', 'multiply', 'overlay', 'color', 'hard-light'.
                       ) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image.
    // Assumes originalImg is a loaded JavaScript Image object (e.g., from new Image() or <img> element).
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // 1. Construct the CSS filter string for base image adjustments.
    // The order of filters can affect the final output. A common and effective order is
    // brightness -> contrast -> saturation -> color-specific effects like sepia.
    let filterParts = [];
    if (brightnessLevel !== 1.0) { // Avoid adding if it's the default neutral value
        filterParts.push(`brightness(${brightnessLevel})`);
    }
    if (contrastLevel !== 1.0) {
        filterParts.push(`contrast(${contrastLevel})`);
    }
    if (saturationLevel !== 1.0) {
        filterParts.push(`saturate(${saturationLevel})`);
    }
    if (sepiaLevel > 0.0) { // sepiaLevel = 0 has no effect
        filterParts.push(`sepia(${sepiaLevel})`);
    }
    
    const filterString = filterParts.join(" ");

    // 2. Apply the combined filter string to the canvas context and draw the image.
    if (filterString.length > 0) {
        ctx.filter = filterString;
    }
    
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 3. Reset the filter property of the context.
    // This ensures subsequent drawing operations (like the tint overlay) are not affected by these filters.
    if (filterString.length > 0) {
        ctx.filter = 'none';
    }

    // 4. Apply the color tint overlay if specified.
    if (tintOpacity > 0 && tintColorRGB && tintColorRGB.trim() !== "") {
        // Set the global composite operation (blend mode) for the tint.
        // The user is responsible for providing a valid string for tintBlendMode.
        // Invalid modes might be ignored by the browser or cause errors.
        ctx.globalCompositeOperation = tintBlendMode;
        
        // Set the fill style using the provided RGB color string and opacity.
        ctx.fillStyle = `rgba(${tintColorRGB}, ${tintOpacity})`;
        
        // Draw a rectangle covering the entire canvas with the tint color and blend mode.
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Reset globalCompositeOperation to its default 'source-over' mode.
        // This is good practice to avoid affecting other drawing operations if the canvas is reused.
        ctx.globalCompositeOperation = 'source-over';
    }

    return canvas;
}