Full Face Into Heart Shape Image Tool

function processImage(originalImg, zoom = '1.0', offsetX = '0', offsetY = '0') {
    // Create a new canvas to draw the heart-shaped image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Make the canvas a square based on the smaller dimension to perfectly center the face
    const size = Math.min(originalImg.width, originalImg.height);
    canvas.width = size;
    canvas.height = size;

    // Generate accurate path points for a classic heart shape
    const numPoints = 1000;
    const points = [];
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;

    for (let i = 0; i < numPoints; i++) {
        const t = (i / numPoints) * Math.PI * 2;
        // Classic heart equation
        const x = 16 * Math.pow(Math.sin(t), 3);
        // Canvas uses inverted Y-axis compared to standard math coordinates
        const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
        
        points.push({ x, y });
        
        if (x < minX) minX = x;
        if (x > maxX) maxX = x;
        if (y < minY) minY = y;
        if (y > maxY) maxY = y;
    }

    // Determine scaling to stretch the heart to fill the canvas bounds as much as possible
    const scaleX = size / (maxX - minX);
    const scaleY = size / (maxY - minY);
    const hScale = Math.min(scaleX, scaleY);

    // Calculate offsets to perfectly center the heart in the square canvas
    const cxOffset = (size - (maxX - minX) * hScale) / 2 - minX * hScale;
    const cyOffset = (size - (maxY - minY) * hScale) / 2 - minY * hScale;

    // Plot the heart shape onto the canvas context
    ctx.beginPath();
    points.forEach((p, i) => {
        const px = p.x * hScale + cxOffset;
        const py = p.y * hScale + cyOffset;
        if (i === 0) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
    });
    ctx.closePath();

    // Mask everything drawn outside the heart path
    ctx.clip();

    // Source coordinates for a center-crop of the original image
    const srcSize = size;
    const srcX = (originalImg.width - srcSize) / 2;
    const srcY = (originalImg.height - srcSize) / 2;

    // Parse adjustment parameters with fallbacks
    const z = parseFloat(zoom) || 1.0;
    const ox = parseFloat(offsetX) || 0.0;
    const oy = parseFloat(offsetY) || 0.0;

    // Output destination coordinates applying the zoom and offset configurations
    const drawW = size * z;
    const drawH = size * z;
    const drawX = (size - drawW) / 2 + ox;
    const drawY = (size - drawH) / 2 + oy;

    // Draw the image onto the canvas clipped inside the heart
    ctx.drawImage(
        originalImg,
        srcX, Math.max(0, srcY), srcSize, srcSize, 
        drawX, drawY, drawW, drawH
    );

    return canvas;
}