Image Anamorphic Lens Flare Filter Effect Tool

function processImage(
    originalImg,
    brightnessThreshold = 230,
    flareLength = 80,
    flareStrength = 0.7,
    flareColor = "120,180,255",
    flareMaxThickness = 2.0,
    flareSolidProportion = 0.1
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // 1. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 2. Get image data for pixel analysis
    // This needs to be done after drawing, as getImageData reads from the canvas content.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting image data: ", e);
        // If canvas is tainted (e.g., cross-origin image without CORS), we can't process.
        // In this case, we might just return the original image drawn on a new canvas,
        // or throw an error, or return an empty canvas.
        // For this example, let's return the canvas with just the original image drawn.
        return canvas;
    }
    
    const data = imageData.data;
    const width = canvas.width;
    const height = canvas.height;

    // Parse flare color string "R,G,B" into components
    const colorParts = flareColor.split(',');
    const flareR = parseInt(colorParts[0], 10) || 120;
    const flareG = parseInt(colorParts[1], 10) || 180;
    const flareB = parseInt(colorParts[2], 10) || 255;

    // 3. Iterate through each pixel to find bright spots and draw flares
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4; // Index for the R component of the current pixel
            const rVal = data[i];
            const gVal = data[i + 1];
            const bVal = data[i + 2];

            // Calculate luminance using the ITU-R BT.709 formula (perceived brightness)
            const luminance = 0.2126 * rVal + 0.7152 * gVal + 0.0722 * bVal;

            if (luminance > brightnessThreshold) {
                // Determine how much brighter the pixel is than the threshold (normalized 0-1)
                const effectiveMaxLuminanceAboveThreshold = Math.max(1, 255 - brightnessThreshold);
                const brightnessRatio = Math.min(1, (luminance - brightnessThreshold) / effectiveMaxLuminanceAboveThreshold);

                // Calculate flare properties based on brightnessRatio and input parameters
                // Flare length is influenced by base length, brightness, and overall strength
                const currentFlareLength = brightnessRatio * flareLength * (1 + flareStrength);
                
                // Peak opacity of the flare is influenced by brightness and strength
                const peakOpacity = brightnessRatio * flareStrength; 
                const clampedPeakOpacity = Math.min(1, Math.max(0, peakOpacity)); // Ensure opacity is [0,1]

                // Flare thickness scales with brightness up to flareMaxThickness
                const currentFlareThickness = Math.max(1, brightnessRatio * flareMaxThickness);
                
                // Only draw if the flare has some visible length, opacity, and thickness
                if (currentFlareLength > 1 && clampedPeakOpacity > 0.01 && currentFlareThickness >= 1) {
                    ctx.beginPath();
                    
                    // Align Y coordinate to pixel grid for sharper horizontal lines
                    const lineY = Math.floor(y) + 0.5; 
                    const startX = x - currentFlareLength / 2;
                    const endX = x + currentFlareLength / 2;

                    // Create a horizontal linear gradient for the flare's stroke style
                    const gradient = ctx.createLinearGradient(startX, lineY, endX, lineY);
                    
                    // Define gradient stops to create a flare that's brightest at the source
                    // and fades out towards its ends. flareSolidProportion controls the "core"
                    // of the flare that remains at peak opacity.
                    const coreStart = Math.max(0, 0.5 - (flareSolidProportion / 2));
                    const coreEnd = Math.min(1, 0.5 + (flareSolidProportion / 2));

                    gradient.addColorStop(0, `rgba(${flareR}, ${flareG}, ${flareB}, 0)`); // Start: fully transparent
                    if (coreStart === coreEnd) { // For a perfectly sharp peak (flareSolidProportion = 0)
                        gradient.addColorStop(coreStart, `rgba(${flareR}, ${flareG}, ${flareB}, ${clampedPeakOpacity})`);
                    } else {
                        gradient.addColorStop(coreStart, `rgba(${flareR}, ${flareG}, ${flareB}, ${clampedPeakOpacity})`);
                        gradient.addColorStop(coreEnd, `rgba(${flareR}, ${flareG}, ${flareB}, ${clampedPeakOpacity})`);
                    }
                    gradient.addColorStop(1, `rgba(${flareR}, ${flareG}, ${flareB}, 0)`); // End: fully transparent
                    
                    ctx.strokeStyle = gradient;
                    ctx.lineWidth = currentFlareThickness;
                    
                    // Draw the flare line
                    ctx.moveTo(startX, lineY);
                    ctx.lineTo(endX, lineY);
                    ctx.stroke();
                }
            }
        }
    }
    // Return the canvas with the original image and applied lens flares
    return canvas;
}