Please bookmark this page to avoid losing your image tool!

Image 70s Photo Filter

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The ‘Image 70s Photo Filter’ tool allows users to apply a vintage 1970s style filter to their images. This includes adjustments for sepia tone, saturation, contrast, and brightness, enabling a nostalgic look reminiscent of that era. Additionally, users can overlay a color tint with adjustable opacity and blend modes, providing further customization. This tool is perfect for photography enthusiasts, social media users, and anyone looking to give their images a retro aesthetic.

Leave a Reply

Your email address will not be published. Required fields are marked *