Image Campfire Glow Filter Effect 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;
}