Image Reconciliation Visualizer

/**
 * Creates a visual "reconciliation" meme by mirroring an image and placing a handshake icon in the middle.
 * The original image is placed on the left, and a horizontally flipped version is on the right,
 * symbolizing two sides coming together. A handshake icon is overlaid in the center to complete the theme.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the canvas element containing the 'reconciled' image.
 */
async function processImage(originalImg) {
    /**
     * Helper function to asynchronously load an image from a source URL.
     * This is used to load the SVG handshake icon from a data URL.
     * @param {string} src The source of the image (e.g., a data URL).
     * @returns {Promise<Image>} A promise that resolves with the loaded Image object.
     */
    const loadImage = src => new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = err => reject(err);
        img.src = src;
    });

    const w = originalImg.width;
    const h = originalImg.height;

    // Create a new canvas with double the width to hold both images.
    const canvas = document.createElement('canvas');
    canvas.width = w * 2;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // 1. Draw the original image on the left half of the canvas.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Draw a horizontally mirrored version of the image on the right half.
    ctx.save();
    ctx.translate(canvas.width, 0); // Move the canvas origin to the top-right corner.
    ctx.scale(-1, 1); // Flip the canvas context horizontally.
    ctx.drawImage(originalImg, 0, 0, w, h); // Draw the image in the flipped context.
    ctx.restore(); // Restore the context to its original state.

    // 3. Define a handshake icon as an SVG string.
    // Source: Iconoir (https://iconoir.com/), MIT License.
    const svgString = `
    <svg width="256" height="256" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 12V7C16 5.34315 14.6569 4 13 4C11.3431 4 10 5.34315 10 7V12M16 12L19 15L21 17M16 12L11 17L8 20" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M8 12V7C8 5.34315 9.34315 4 11 4C12.6569 4 14 5.34315 14 7V12M8 12L5 15L3 17M8 12L13 17L16 20" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    `;

    // 4. Convert the SVG string to a Base64 data URL and load it as an image.
    const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(svgString);
    const handshakeImg = await loadImage(svgDataUrl);

    // 5. Calculate the size and position for the central icon.
    // The icon size is relative to the smaller dimension of the original image.
    const iconSize = Math.min(w, h) * 0.5;
    const iconX = w - (iconSize / 2); // Horizontally center on the seam.
    const iconY = (h / 2) - (iconSize / 2); // Vertically center.

    // 6. Draw a decorative background circle with a shadow to make the icon stand out.
    ctx.save();
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetY = 4;
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.beginPath();
    ctx.arc(w, h / 2, iconSize * 0.5, 0, Math.PI * 2); // Circle centered on the seam.
    ctx.fill();
    ctx.restore();

    // 7. Draw the handshake icon on top of the circle.
    ctx.drawImage(handshakeImg, iconX, iconY, iconSize, iconSize);

    return canvas;
}