Image Polaroid 600 Filter Effect Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the original image dimensions are used
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 1. Initial draw with base adjustments
    // These settings aim for a slightly washed-out, soft, and desaturated base,
    // characteristic of some Polaroid prints (e.g., "milky" blacks, less sharpness).
    // Values are percentages for CSS-like filter strings.
    // blur(0.3px) adds a very subtle softness.
    ctx.filter = 'brightness(110%) contrast(90%) saturate(80%) blur(0.3px)';
    ctx.drawImage(originalImg, 0, 0, w, h);
    ctx.filter = 'none'; // Reset filter for subsequent direct drawing operations

    // 2. Color Tinting Layers
    // These layers mimic the characteristic color shifts often seen in Polaroid film.
    // The order and globalCompositeOperation mode are crucial.

    // Add a warm (yellow/orange) overlay.
    // 'overlay' blend mode works well for this, affecting mid-tones significantly.
    ctx.globalCompositeOperation = 'overlay';
    ctx.fillStyle = 'rgba(255, 180, 70, 0.1)'; // Warm orange, adjust opacity (0.1 = 10%)
    ctx.fillRect(0, 0, w, h);

    // Add a cool (cyan/blue) tint.
    // 'soft-light' is gentler and good for subtly tinting without over-brightening.
    // This can give a hint of blue/cyan to shadows or an overall cooler feel.
    ctx.globalCompositeOperation = 'soft-light';
    ctx.fillStyle = 'rgba(70, 100, 150, 0.08)'; // Cool blue/cyan, adjust opacity (0.08 = 8%)
    ctx.fillRect(0, 0, w, h);
    
    // (Optional) A hint of magenta, sometimes present in Polaroid prints.
    // Kept subtle or can be commented out if the effect is too strong or specific.
    // ctx.globalCompositeOperation = 'soft-light';
    // ctx.fillStyle = 'rgba(180, 60, 120, 0.05)'; // Magenta, very subtle opacity (0.05 = 5%)
    // ctx.fillRect(0, 0, w, h);

    ctx.globalCompositeOperation = 'source-over'; // Reset composite operation to default

    // 3. Vignetting
    // Darkens the corners of the image, a common artifact in older photos.
    const centerX = w / 2;
    const centerY = h / 2;
    // The outer radius of the vignette can extend to the image corners.
    const outerRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
    // The inner radius determines where the vignette effect starts becoming visible.
    // A factor of 0.5 means the central 50% of the radius is largely unaffected.
    const innerRadius = outerRadius * 0.5; 

    const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);
    // Start with transparent black at the inner radius
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    // Transition to semi-transparent black at the outer radius for the darkening effect
    gradient.addColorStop(1, 'rgba(0,0,0,0.3)'); // Adjust alpha for vignette strength (0.3 = 30% opacity)

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, w, h);

    // 4. Film Grain
    // Adds a subtle noise pattern to mimic the texture of film.
    const imageData = ctx.getImageData(0, 0, w, h);
    const pixels = imageData.data;
    const grainAmount = 15; // Adjust for grain intensity (e.g., 10-25)

    for (let i = 0; i < pixels.length; i += 4) {
        // Add random noise to R, G, B channels. Noise is centered around 0.
        const noise = (Math.random() - 0.5) * grainAmount;
        pixels[i]     = Math.max(0, Math.min(255, pixels[i] + noise));     // Red
        pixels[i + 1] = Math.max(0, Math.min(255, pixels[i + 1] + noise)); // Green
        pixels[i + 2] = Math.max(0, Math.min(255, pixels[i + 2] + noise)); // Blue
        // Alpha channel (pixels[i+3]) remains unchanged
    }
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}