Image Ilazar Tool

/**
 * Applies a "laser eyes" effect to an image, a popular meme effect.
 * The effect is placed at specified coordinates.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} [eye1X=35] The X-coordinate of the first eye as a percentage of image width (e.g., 35 for 35%).
 * @param {number} [eye1Y=45] The Y-coordinate of the first eye as a percentage of image height (e.g., 45 for 45%).
 * @param {number} [eye2X=65] The X-coordinate of the second eye as a percentage of image width.
 * @param {number} [eye2Y=45] The Y-coordinate of the second eye as a percentage of image height.
 * @param {number} [flareSize=10] The size of the main glow as a percentage of the image width.
 * @param {string} [glowColor='#ff0000'] The hex color of the glow (e.g., '#ff0000' for red, '#00f' for blue).
 * @param {number} [glowIntensity=1.0] A multiplier for the brightness and size of the glow effect.
 * @returns {HTMLCanvasElement} A canvas element with the "Ilazar" effect applied.
 */
function processImage(originalImg, eye1X = 35, eye1Y = 45, eye2X = 65, eye2Y = 45, flareSize = 10, glowColor = '#ff0000', glowIntensity = 1.0) {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions to match the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    // Helper function to draw a single laser eye effect
    const drawLaserEye = (centerXPercent, centerYPercent) => {
        // Convert percentage-based parameters to absolute pixel values
        const absX = centerXPercent / 100 * width;
        const absY = centerYPercent / 100 * height;

        // The radius of the flare is based on a percentage of the image width
        const radius = (flareSize / 100 * width) / 2;
        const finalRadius = radius * glowIntensity;

        // Use 'lighter' (or 'screen', 'color-dodge') for an additive blending effect, which creates a bright glow
        ctx.globalCompositeOperation = 'lighter';

        // --- Main Glow Part ---
        // Create a radial gradient for the primary glow effect
        // It fades from a hot center to the glow color, then to transparent
        const glow = ctx.createRadialGradient(absX, absY, 0, absX, absY, finalRadius);

        // Parse the hex glowColor to use its RGB components with varying alpha
        const r = parseInt(glowColor.slice(1, 3), 16);
        const g = parseInt(glowColor.slice(3, 5), 16);
        const b = parseInt(glowColor.slice(5, 7), 16);

        glow.addColorStop(0, `rgba(255, 255, 220, 0.9)`); // White-hot center
        glow.addColorStop(0.2, `rgba(${r}, ${g}, ${b}, 0.8)`); // Main glow color
        glow.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, 0.4)`); // Fading glow
        glow.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`); // Fully transparent edge

        // Apply the gradient fill
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(absX, absY, finalRadius, 0, 2 * Math.PI);
        ctx.fill();

        // --- Lens Flare Part ---
        // Add some horizontal flare lines for a more stylized effect
        const flareWidth = finalRadius * 4;
        const flareHeight = finalRadius * 0.2;
        const flare = ctx.createLinearGradient(absX - flareWidth / 2, absY, absX + flareWidth / 2, absY);
        flare.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
        flare.addColorStop(0.4, `rgba(${r}, ${g}, ${b}, 0.5)`);
        flare.addColorStop(0.5, `rgba(255, 255, 220, 0.9)`);
        flare.addColorStop(0.6, `rgba(${r}, ${g}, ${b}, 0.5)`);
        flare.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);

        ctx.fillStyle = flare;
        ctx.fillRect(absX - flareWidth / 2, absY - flareHeight / 2, flareWidth, flareHeight);

        // --- Core Part ---
        // Draw a small, bright white core for the laser emitter
        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
        ctx.beginPath();
        ctx.arc(absX, absY, radius * 0.15, 0, 2 * Math.PI);
        ctx.fill();

        // Reset the composite operation back to the default
        ctx.globalCompositeOperation = 'source-over';
    };

    // Draw the effect for the first eye, if its coordinates are positive
    if (eye1X > 0 && eye1Y > 0) {
        drawLaserEye(eye1X, eye1Y);
    }
    // Draw the effect for the second eye, if its coordinates are positive
    if (eye2X > 0 && eye2Y > 0) {
        drawLaserEye(eye2X, eye2Y);
    }

    // Return the final canvas element
    return canvas;
}