Please bookmark this page to avoid losing your image tool!

Image Campfire Glow Filter Effect Tool

(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, warmth = 60, brightness = 5, contrast = 20, vignetteStrength = 0.35) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Handle cases where the image might not be loaded or has no dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas; // Return an empty canvas
    }

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

    // Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing image to canvas. If it's a cross-origin image, ensure it has CORS headers and the img tag has crossOrigin='anonymous'.", e);
        // Optionally, draw an error message on the canvas here, or just return it blank/as is.
        // For this tool, returning the canvas as is (potentially blank or with a partial draw) is acceptable.
        return canvas;
    }
    
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting image data. This often happens with cross-origin images.", e);
        // This error means we can't process the pixels. Return the canvas with the original image drawn.
        return canvas;
    }
    
    const data = imageData.data;

    // Parameter adjustments
    // Contrast: input range -50 to 50. Factor from 0.5 to 1.5.
    // (e.g., contrast: 20 -> factor 1.2; contrast: -20 -> factor 0.8)
    const contrastFactor = 1.0 + (contrast / 100.0);

    const centerX = imgWidth / 2;
    const centerY = imgHeight / 2;
    // Calculate max distance from center to a corner for vignette normalization
    const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);

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

        // 1. Apply Vignette (if strength > 0)
        // This darkens the edges, focusing light towards the center.
        if (vignetteStrength > 0 && maxDistance > 0) {
            const pixelIndex = i / 4;
            const x = pixelIndex % imgWidth;
            const y = Math.floor(pixelIndex / imgWidth);

            const dx = x - centerX;
            const dy = y - centerY;
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            // Normalized distance: 0 at center, 1 at corners (approximately)
            const normalizedDistance = distance / maxDistance;

            // Vignette reduction factor: 1 at center, (1 - vignetteStrength) at max distance.
            // We use (normalizedDistance)^power to control the falloff curve. Power=1 is linear.
            // A power like 0.75 or 1 makes a smooth vignette.
            const vignettePower = 1.0; 
            const reduction = vignetteStrength * Math.pow(normalizedDistance, vignettePower);
            const currentVignetteFactor = Math.max(0, 1.0 - reduction); // Ensure factor doesn't go below 0

            r *= currentVignetteFactor;
            g *= currentVignetteFactor;
            b *= currentVignetteFactor;
        }

        // 2. Apply Warmth
        // Increases red, slightly increases green, decreases blue to simulate warm light.
        r += warmth;
        g += warmth * 0.6; // Green boosted slightly less than red for orange/yellowish hues
        b -= warmth * 0.8; // Blue reduced to enhance warmth

        // 3. Apply Brightness
        // Overall brightness adjustment.
        r += brightness;
        g += brightness;
        b += brightness;

        // 4. Apply Contrast
        // Adjusts intensity relative to the midpoint (128).
        r = ((r - 128) * contrastFactor) + 128;
        g = ((g - 128) * contrastFactor) + 128;
        b = ((b - 128) * contrastFactor) + 128;

        // Clamp values to the valid [0, 255] range
        data[i]     = Math.max(0, Math.min(255, r));
        data[i + 1] = Math.max(0, Math.min(255, g));
        data[i + 2] = Math.max(0, Math.min(255, b));
        // Alpha channel (data[i+3]) remains unchanged
    }

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

    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 Campfire Glow Filter Effect Tool allows users to apply a warm, inviting filter effect to their images, simulating a cozy campfire ambiance. With adjustable parameters for warmth, brightness, contrast, and vignette strength, this tool lets you enhance photos for personal use or social media sharing. It’s perfect for creating atmospheric images that evoke feelings of warmth and nostalgia, ideal for travel photography, outdoor adventures, or simply adding a unique touch to your favorite shots.

Leave a Reply

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