Image Cross-Screen Star Filter Effect Tool

function processImage(
    originalImg,
    brightnessThreshold = 220,
    points = 4,
    radius = 50,
    color = "rgba(255, 255, 255, 0.8)",
    thickness = 1.5,
    angle = 0
) {
    // Coerce parameters to their expected types and validate them
    let p_brightnessThreshold = Number(String(brightnessThreshold));
    if (isNaN(p_brightnessThreshold)) {
        p_brightnessThreshold = 220; // Default if undefined or invalid
    }

    let p_points = parseInt(String(points), 10);
    if (isNaN(p_points) || p_points < 1) {
        p_points = 4; // Default if undefined, invalid, or less than 1
    }

    let p_radius = Number(String(radius));
    if (isNaN(p_radius)) {
        p_radius = 50; // Default if undefined or invalid
    }

    let p_thickness = Number(String(thickness));
    if (isNaN(p_thickness) || p_thickness <= 0) {
        p_thickness = 1.5; // Default if undefined, invalid, or non-positive
    }

    let p_angle = Number(String(angle));
    if (isNaN(p_angle)) {
        p_angle = 0; // Default if undefined or invalid
    }

    const p_color = String(color);

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

    // Check if originalImg is a valid, loaded image object
    // naturalWidth/Height are 0 if not loaded or image is invalid.
    if (!originalImg || typeof originalImg.naturalWidth === 'undefined' || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Original image is not loaded or invalid. Cannot apply star filter.");
        // Create a placeholder canvas with an error message
        canvas.width = 300;
        canvas.height = 150;
        ctx.fillStyle = "lightgray";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "black";
        ctx.textAlign = "center";
        ctx.font = "16px Arial";
        ctx.fillText("Invalid Image Object", canvas.width / 2, canvas.height / 2);
        return canvas;
    }
    
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Get image data. This can fail for cross-origin images if the canvas becomes tainted.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Could not get image data (e.g., cross-origin issue):", e);
        // If image data cannot be accessed, return the canvas with the original image
        // and an error message drawn on top.
        ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "white";
        ctx.textAlign = "center";
        ctx.font = "bold 16px Arial";
        ctx.fillText("Error: Cannot process cross-origin image.", canvas.width / 2, canvas.height / 2);
        return canvas;
    }
    const data = imageData.data;

    const brightSpots = [];

    // Iterate through pixels to find bright spots
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        
        // Calculate brightness using luma formula (perceived brightness)
        const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

        if (brightness > p_brightnessThreshold) {
            const pixelIndex = i / 4;
            const x = pixelIndex % canvas.width;
            const y = Math.floor(pixelIndex / canvas.width);
            brightSpots.push({ x, y });
        }
    }

    // Set drawing properties for the stars
    ctx.strokeStyle = p_color;
    ctx.lineWidth = p_thickness;
    ctx.lineCap = 'round'; // Options: 'butt', 'round', 'square'

    const angleOffsetRad = (p_angle * Math.PI) / 180; // Convert offset angle to radians

    brightSpots.forEach(spot => {
        for (let i = 0; i < p_points; i++) {
            // Calculate the angle for the current spike
            const currentSpikeAngleRad = angleOffsetRad + (Math.PI * 2 * i) / p_points;
            
            // Calculate the end point of the spike
            // Spikes radiate from the center of the bright spot (spot.x, spot.y)
            const endX = spot.x + p_radius * Math.cos(currentSpikeAngleRad);
            const endY = spot.y + p_radius * Math.sin(currentSpikeAngleRad);
            
            // Draw the spike
            ctx.beginPath();
            ctx.moveTo(spot.x, spot.y);
            ctx.lineTo(endX, endY);
            ctx.stroke();
        }
    });

    return canvas;
}