Image Candlelight Filter Effect Application

function processImage(originalImg, warmthIntensity = 0.7, vignetteStrength = 0.3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for actual image dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // If the image has no dimensions, return an empty canvas
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        // This can happen due to tainted canvas (CORS) if image is cross-origin
        console.error("Error getting ImageData:", e);
        // Return the canvas with the original image drawn, as processing isn't possible
        return canvas; 
    }
    
    const data = imageData.data;
    
    // Process and normalize parameters
    // warmthIntensity: 0 (no change) to 1 (full warmth effect)
    // vignetteStrength: 0 (no vignette) to 1 (strongest vignette)

    let actualWarmthIntensity = Number(warmthIntensity);
    if (isNaN(actualWarmthIntensity)) {
        actualWarmthIntensity = 0.7; // Default if input was not a valid number
    }
    actualWarmthIntensity = Math.max(0, Math.min(1, actualWarmthIntensity));

    let actualVignetteStrength = Number(vignetteStrength);
    if (isNaN(actualVignetteStrength)) {
        actualVignetteStrength = 0.3; // Default if input was not a valid number
    }
    actualVignetteStrength = Math.max(0, Math.min(1, actualVignetteStrength));

    const centerX = imgWidth / 2;
    const centerY = imgHeight / 2;
    
    // maxDist for vignette calculation is the distance from center to a corner.
    // Fallback to 1 if width/height are so small that maxDist is 0, to prevent division by zero.
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY) || 1; 

    // Define warmth color transformation factors based on intensity
    // Increase Red, slightly increase Green, decrease Blue
    const rWarmthFactor = 1.0 + (0.4 * actualWarmthIntensity); // e.g., up to 1.4x
    const gWarmthFactor = 1.0 + (0.2 * actualWarmthIntensity); // e.g., up to 1.2x
    const bWarmthFactor = 1.0 - (0.3 * actualWarmthIntensity); // e.g., down to 0.7x

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

        // Apply warmth effect
        r *= rWarmthFactor;
        g *= gWarmthFactor;
        b *= bWarmthFactor;
        
        // Clamp color values to [0, 255] range after warmth adjustment
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // Apply vignette effect
        if (actualVignetteStrength > 0) {
            const pixelX = (i / 4) % imgWidth;
            const pixelY = Math.floor((i / 4) / imgWidth);
            
            const dx = pixelX - centerX;
            const dy = pixelY - centerY;
            const dist = Math.sqrt(dx * dx + dy * dy);
            
            const normalizedDist = dist / maxDist; // Ranges from 0 (center) to 1 (corner)

            // vignetteAmount calculates how much to scale brightness.
            // At center (normalizedDist=0), vignetteAmount = 1.0 (no change).
            // At corner (normalizedDist=1), vignetteAmount = 1.0 - actualVignetteStrength.
            // E.g., if actualVignetteStrength = 1, corner is 0 (black).
            // E.g., if actualVignetteStrength = 0.5, corner is 0.5 (50% brightness).
            let vignetteAmount = 1.0 - (normalizedDist * actualVignetteStrength);
            vignetteAmount = Math.max(0, vignetteAmount); // Ensure factor is not negative

            r *= vignetteAmount;
            g *= vignetteAmount;
            b *= vignetteAmount;
            // Pixel values are already within [0,255] and vignetteAmount is [0,1],
            // so r,g,b will remain within [0,255].
        }
        
        // Assign rounded values back to pixel data
        data[i] = Math.round(r);
        data[i + 1] = Math.round(g);
        data[i + 2] = Math.round(b);
        // Alpha channel (data[i+3]) remains unchanged
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}