Image Activation Helmet Tool

/**
 * Applies a "helmet-activate" meme effect to an image by overlaying a helmet and laser beams from the eyes.
 * The position and scale of the effects are determined by the provided eye coordinates.
 *
 * @param {HTMLImageElement} originalImg The source image object.
 * @param {number} [leftEyeXPct=35] The horizontal position of the left eye, as a percentage of image width (0-100).
 * @param {number} [leftEyeYPct=45] The vertical position of the left eye, as a percentage of image height (0-100).
 * @param {number} [rightEyeXPct=65] The horizontal position of the right eye, as a percentage of image width (0-100).
 * @param {number} [rightEyeYPct=45] The vertical position of the right eye, as a percentage of image height (0-100).
 * @param {number} [helmetScale=1.8] The size of the helmet relative to the distance between the eyes.
 * @param {number} [helmetOffsetY=-1.2] The vertical offset of the helmet, in units of eye-distance. Negative values move it up.
 * @param {string} [laserColor='#ff0000'] The color of the laser beams as a CSS color string (e.g., hex code).
 * @param {number} [laserWidth=0.2] The width of the laser beams as a fraction of the distance between the eyes.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the resulting canvas element.
 */
async function processImage(
    originalImg,
    leftEyeXPct = 35,
    leftEyeYPct = 45,
    rightEyeXPct = 65,
    rightEyeYPct = 45,
    helmetScale = 1.8,
    helmetOffsetY = -1.2,
    laserColor = '#ff0000',
    laserWidth = 0.2
) {
    // A simple, royalty-free knight helmet icon embedded as a Base64 Data URI.
    const helmetDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAAB65x/PAAAC/ElEQVR4Ae2bv2tcQRDHv7Pbu72NhaATCRYaZCGIZk0shYAgthYRsbGwsfCfkYAgpLGVIFaCIBaKpViIlYUIYimxlbBQu0jEhAsBFoLgYrc7n53d2e3m9ubN3u6e37oA/M7Ozs7PzM7O7i7g+w/Jv/5+D3wP/L4f7AJYBLAIYBHAIoBFwM+B/8vPz/CqWqt830tVvTzPq2qtcBzH67r+n0Xg+z8GjgJ4Hngp5Hk+53medjKZFJ7nhdTQ2+3293Q6fY7n+Q0AAGiaptfr9fV+v39TFAVCp9MZZVm+3+/fUavVAwCA8zydTudbrVb/NpwAY5yKooi7XC65l+sBACAUCoVGo/H70d3tFADgOE6tVvu+XC7/bjgBxnkmSZLdbvfZ6XS2XNe9AQBARLJer1cqlfp26O52CoApyjIUCqXRaHwv5xIAoCiKsixbLpf/K9e13u/35XK53Gq1/jucACRJ0mq1vrper1/K5TIAAFAqlePz+XxarXbYMMdxfAJAq9V6Pp/vTqeTTicAAMdxjDEYY5Ik6XQ6tVqtvs11Xec4DqdSqdfr9X8bTgDdbvccx202m5RSCCEEKQXbtmEYBgBAaZqmjDGtVqtvGGMsy4bZ6XRa1/U1AF+stVpKKcYYjDFt29YaQghIKeo4jnEcGIYBY4wxxhjjGIZhGMdxHCcAREmStFqtIYS8Xq8xxthznud5nvM8x3GMMcYYAKIoSqvVCrZt27YtSZIEIYQQpZQxxgDAKaUkyXCMYZpm27YkSdk2DQDgOI5pmmMMy7JpmuM4AGNIKaWUUkqpVIq2bQDAGIZhmqYxDDHGtm2aplJKAMAYYwzDMAwjhBDLshiGQRjDWquUUgDAGGMMIYQQgud5kiSMMcYYy7JyHAcAwBinKaUoilJKkiRpmiGEAMAYY5IkkiTJOI5SShhjKSAAxhgASZJt21LKGGMMIYQQmqaUUgDg/wt8gJa6+M+fBf4L7ADeAbwDeGfg/8CvgJ8Cvwb+BvwT+A2wPzS6AD/9+t8/AAAA//8DAFr+L2R8z5J5AAAAAElFTkSuQmCC';

    const helmetImg = new Image();
    // Use a promise to ensure the helmet image is loaded before we use it.
    const helmetPromise = new Promise((resolve, reject) => {
        helmetImg.onload = () => resolve(helmetImg);
        helmetImg.onerror = reject;
        helmetImg.src = helmetDataUrl;
    });

    try {
        await helmetPromise;
    } catch (e) {
        console.error("Failed to load embedded helmet asset.", e);
        // Fallback: return a canvas with just the original image if asset loading fails.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalImg.naturalWidth;
        errorCanvas.height = originalImg.naturalHeight;
        errorCanvas.getContext('2d').drawImage(originalImg, 0, 0);
        return errorCanvas;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Convert percentage parameters to pixel coordinates
    const leftEyeX = originalImg.naturalWidth * (leftEyeXPct / 100);
    const leftEyeY = originalImg.naturalHeight * (leftEyeYPct / 100);
    const rightEyeX = originalImg.naturalWidth * (rightEyeXPct / 100);
    const rightEyeY = originalImg.naturalHeight * (rightEyeYPct / 100);

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

    // --- GEOMETRY CALCULATIONS ---
    // Calculate distance, midpoint, and angle between the eyes for positioning and rotation
    const eyeDist = Math.sqrt(Math.pow(rightEyeX - leftEyeX, 2) + Math.pow(rightEyeY - leftEyeY, 2));
    const midX = (leftEyeX + rightEyeX) / 2;
    const midY = (leftEyeY + rightEyeY) / 2;
    const angle = Math.atan2(rightEyeY - leftEyeY, rightEyeX - leftEyeX);

    // --- LASER DRAWING ---
    const laserLength = Math.max(canvas.width, canvas.height) * 2; // Make lasers long enough to go off-screen

    const drawLaser = (startX, startY) => {
        const endX = startX + laserLength * Math.cos(angle);
        const endY = startY + laserLength * Math.sin(angle);

        ctx.save();
        // 1. Outer Glow: A thick, blurred line using shadowBlur
        ctx.lineCap = 'round';
        ctx.shadowColor = laserColor;
        ctx.shadowBlur = eyeDist * 0.2; // Glow size proportional to face size
        ctx.strokeStyle = laserColor;
        ctx.lineWidth = eyeDist * laserWidth;
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        ctx.stroke();

        // 2. Inner Core: A thin, solid white line on top of the glow
        ctx.shadowBlur = 0;
        ctx.strokeStyle = '#FFFFFF';
        ctx.lineWidth = eyeDist * laserWidth * 0.25;
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        ctx.stroke();
        ctx.restore();
    };

    // Draw lasers from each eye. They are drawn before the helmet to appear underneath it.
    drawLaser(leftEyeX, leftEyeY);
    drawLaser(rightEyeX, rightEyeY);

    // --- HELMET DRAWING ---
    const helmetWidth = eyeDist * helmetScale;
    const helmetHeight = helmetImg.height * (helmetWidth / helmetImg.width);

    ctx.save();
    // Move the canvas origin to the midpoint between the eyes and rotate to match the face angle
    ctx.translate(midX, midY);
    ctx.rotate(angle);

    // In the new rotated coordinate system, the helmet is centered horizontally (x=0)
    // and offset vertically along the new y-axis.
    const helmetDrawX = 0;
    const helmetDrawY = eyeDist * helmetOffsetY; // A negative value moves it "up"

    // Draw the helmet, centering it on its calculated position
    ctx.drawImage(helmetImg, helmetDrawX - helmetWidth / 2, helmetDrawY - helmetHeight / 2, helmetWidth, helmetHeight);

    ctx.restore(); // Restore the canvas context to its original state

    return canvas;
}