Image Laser Light Filter Effect Tool

function processImage(originalImg, laserColor = "red", brightnessThreshold = 220, laserLength = 100, laserThickness = 2, glowRadius = 10, samplingStep = 3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure parameters are valid types and within sensible ranges
    // Convert string numbers to actual numbers, except for laserColor
    brightnessThreshold = Math.max(0, Math.min(255, Number(brightnessThreshold)));
    laserLength = Math.max(0, Number(laserLength));
    laserThickness = Math.max(1, Number(laserThickness)); // Minimum thickness of 1
    glowRadius = Math.max(0, Number(glowRadius));
    samplingStep = Math.max(1, Number(samplingStep)); // Minimum step of 1

    // Set canvas dimensions
    // Use naturalWidth/Height if available (for loaded images), fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;
    
    if (imgWidth === 0 || imgHeight === 0) {
        // If image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas or handle error
        console.error("Image has zero dimensions. Cannot process.");
        // Optionally, return a small placeholder canvas or throw an error
        canvas.width = 1;
        canvas.height = 1;
        return canvas; 
    }

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

    // Draw the original image onto the canvas. This will be the base.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Get the pixel data from the drawn original image.
    // This is used to identify bright spots based on the original image content.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        // This can happen if the image is cross-origin and the canvas becomes tainted.
        console.error("Failed to get image data (cross-origin issues?):", e);
        // Fallback: return the canvas with only the original image drawn, as pixel manipulation is not possible.
        return canvas;
    }
    
    const data = imageData.data;

    // Helper function to draw a single laser streak.
    // This function draws directly onto the main canvas context, on top of the image.
    const drawLaserStreak = (context, centerX, centerY, color, length, thickness, glow) => {
        context.save(); // Save current context state (like fillStyle, strokeStyle, shadow properties)

        // Set properties for the laser line
        context.strokeStyle = color;
        context.lineWidth = thickness;
        
        // Set properties for the glow effect using canvas shadow
        context.shadowColor = color;   // The color of the glow
        context.shadowBlur = glow;     // The blur radius of the glow
        context.shadowOffsetX = 0;     // Horizontal offset of the glow (0 means centered)
        context.shadowOffsetY = 0;     // Vertical offset of the glow (0 means centered)

        // Begin drawing the path for the laser line
        context.beginPath();
        // A horizontal line centered at (centerX, centerY)
        context.moveTo(centerX - length / 2, centerY);
        context.lineTo(centerX + length / 2, centerY);
        context.stroke(); // Draw the line (and its shadow/glow)
        
        context.restore(); // Restore the context to its state before this function call
                           // This clears the shadow settings so they don't affect other drawings.
    };

    // Iterate through the pixels of the image to find bright spots.
    // The samplingStep parameter controls how many pixels are skiwpped, reducing density.
    for (let y = 0; y < imgHeight; y += samplingStep) {
        for (let x = 0; x < imgWidth; x += samplingStep) {
            // Calculate the index for the current pixel in the 1D imageData array.
            // Each pixel has 4 components (R, G, B, A).
            const index = (y * imgWidth + x) * 4;
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            // const a = data[index + 3]; // Alpha component, not used for brightness calculation here.

            // Calculate brightness. Using luminance formula for perceptual brightness.
            const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
            // Alternative simple average: const brightness = (r + g + b) / 3;

            if (brightness > brightnessThreshold) {
                // If the pixel's brightness is above the threshold,
                // draw a laser streak centered at this pixel's coordinates (x, y).
                drawLaserStreak(ctx, x, y, laserColor, laserLength, laserThickness, glowRadius);
            }
        }
    }

    return canvas; // Return the canvas with the original image and applied_effects.
}