Image Wildfire Filter Effect Tool

function processImage(originalImg, intensity = 0.7, saturationBoost = 1.2) {
    // Ensure intensity is within a reasonable range (e.g., 0 to 1)
    intensity = Math.max(0, Math.min(1, Number(intensity)));
    // Ensure saturationBoost is non-negative (e.g., 0 to 2 or more)
    saturationBoost = Math.max(0, Number(saturationBoost));

    // 1. Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set dimensions
    // Ensure the image is loaded enough to have dimensions
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    if (width === 0 || height === 0) {
        // If image dimensions are not available, return an empty canvas or throw error
        console.error("Image dimensions are not available. Ensure the image is loaded.");
        // Create a small placeholder canvas
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

    // 3. Draw original image
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 4. Get pixel data
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to CORS issues if the image is from another domain
        console.error("Could not get imageData from canvas. Image may be cross-origin tainted.", e);
        // As a fallback, we could try to return the original image drawn on a canvas,
        // but the filter cannot be applied.
        // For this exercise, we'll just return the canvas as is.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    // Luminance constants for saturation adjustment
    const R_LUMINANCE = 0.299;
    const G_LUMINANCE = 0.587;
    const B_LUMINANCE = 0.114;

    // 5. Iterate and modify pixels
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // alpha (data[i+3]) is left untouched

        // 5a. Apply base wildfire color grading based on intensity
        // These formulas aim to shift colors towards reds and oranges, and reduce blues.
        let r_graded = r + (255 - r) * (intensity * 0.60); // Push reds towards 255
        let g_graded = g + (150 - g) * (intensity * 0.45); // Pull greens towards a mid-yellow/orange (150)
        let b_graded = b * (1 - intensity * 0.90);         // Reduce blues significantly

        // Clamp initial graded values
        r_graded = Math.min(255, Math.max(0, r_graded));
        g_graded = Math.min(255, Math.max(0, g_graded));
        b_graded = Math.min(255, Math.max(0, b_graded));

        // 5b. Optional: Boost saturation
        // A saturationBoost of 1.0 means no change.
        if (saturationBoost !== 1.0) {
            // Calculate luminance (grayscale value) of the graded color
            const gray = r_graded * R_LUMINANCE + g_graded * G_LUMINANCE + b_graded * B_LUMINANCE;
            
            // Adjust saturation by pushing color components away from or towards gray
            r_graded = gray + (r_graded - gray) * saturationBoost;
            g_graded = gray + (g_graded - gray) * saturationBoost;
            b_graded = gray + (b_graded - gray) * saturationBoost;

            // Clamp after saturation adjustment
            r_graded = Math.min(255, Math.max(0, r_graded));
            g_graded = Math.min(255, Math.max(0, g_graded));
            b_graded = Math.min(255, Math.max(0, b_graded));
        }
        
        data[i]     = r_graded;
        data[i + 1] = g_graded;
        data[i + 2] = b_graded;
    }

    // 6. Put modified data back
    ctx.putImageData(imageData, 0, 0);

    // 7. Return canvas
    return canvas;
}