Image Bloom Filter Tool

async function processImage(originalImg, threshold = 180, blurRadius = 10, bloomIntensity = 1.0) {
    // Ensure parameters are numbers, as they might come from string inputs
    threshold = Number(threshold);
    blurRadius = Number(blurRadius);
    bloomIntensity = Number(bloomIntensity);

    const width = originalImg.width;
    const height = originalImg.height;

    // Handle cases where the image might not be loaded or has no dimensions
    if (width === 0 || height === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = width; // a 0x0 canvas
        emptyCanvas.height = height;
        console.warn("Image Bloom Filter: Original image has zero width or height. Returning empty canvas.");
        return emptyCanvas;
    }

    // 1. Canvas for source image (to get pixel data)
    // Using a temporary canvas allows processing various image sources (img, video, other canvas)
    // and provides optimization hints for frequent readback.
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = width;
    sourceCanvas.height = height;
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    sourceCtx.drawImage(originalImg, 0, 0, width, height);

    // 2. Create bright-pass canvas
    // This canvas will hold only the bright parts of the image.
    const brightPassCanvas = document.createElement('canvas');
    brightPassCanvas.width = width;
    brightPassCanvas.height = height;
    const brightPassCtx = brightPassCanvas.getContext('2d');

    // Extract bright areas based on luminance threshold
    const imageData = sourceCtx.getImageData(0, 0, width, height);
    const data = imageData.data;
    const brightPassImageData = brightPassCtx.createImageData(width, height); // Or new ImageData(width, height) for modern browsers
    const brightData = brightPassImageData.data;

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

        // Calculate luminance using Rec. 709 coefficients (standard for HDTV)
        // Alternative: (r+g+b)/3 or 0.299*r + 0.587*g + 0.114*b (Rec. 601 for SDTV)
        const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;

        if (luminance >= threshold) {
            brightData[i] = r;
            brightData[i + 1] = g;
            brightData[i + 2] = b;
            brightData[i + 3] = originalAlpha; // Preserve original alpha for bright parts
        } else {
            // Make non-bright pixels transparent black
            brightData[i] = 0;
            brightData[i + 1] = 0;
            brightData[i + 2] = 0;
            brightData[i + 3] = 0;
        }
    }
    brightPassCtx.putImageData(brightPassImageData, 0, 0);

    // 3. Blur the bright-pass canvas
    // This canvas will hold the blurred version of the bright parts.
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = width;
    blurCanvas.height = height;
    const blurCtx = blurCanvas.getContext('2d');

    if (blurRadius > 0) {
        blurCtx.filter = `blur(${blurRadius}px)`;
    }
    
    // Draw brightPassCanvas to blurCanvas. If filter is set, it will be applied.
    // If blurRadius is 0, filter remains 'none' (default), so it's a direct copy.
    blurCtx.drawImage(brightPassCanvas, 0, 0, width, height);
    
    // Reset filter if it was set (good practice, though blurCanvas is temporary)
    if (blurRadius > 0) {
        blurCtx.filter = 'none';
    }
    
    // 4. Composite to create the bloom effect on the output canvas
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = width;
    outputCanvas.height = height;
    const outputCtx = outputCanvas.getContext('2d');

    // Draw the original image first
    outputCtx.drawImage(originalImg, 0, 0, width, height);
    
    // Add the blurred bright parts layer using 'lighter' (additive) blending
    outputCtx.globalCompositeOperation = 'lighter';
    // Control the strength of the bloom effect. Clamp intensity to 0-1 for globalAlpha.
    outputCtx.globalAlpha = Math.max(0, Math.min(1, bloomIntensity)); 
    
    outputCtx.drawImage(blurCanvas, 0, 0, width, height);

    // Reset context properties to defaults for good hygiene
    outputCtx.globalCompositeOperation = 'source-over';
    outputCtx.globalAlpha = 1.0;

    return outputCanvas;
}