Image Blend Merger

async function processImage(originalImg, overlayImgSrc = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', blendMode = 'normal', opacity = 1, offsetX = 0, offsetY = 0) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // If there's no overlay image source, we can return early
    if (!overlayImgSrc || overlayImgSrc.trim() === '') {
        return canvas;
    }

    // Load the overlay (top) image
    const overlayImg = new Image();
    try {
        await new Promise((resolve, reject) => {
            // Set crossOrigin to "anonymous" to allow loading images from other domains without tainting the canvas
            overlayImg.crossOrigin = 'Anonymous';
            overlayImg.onload = resolve;
            overlayImg.onerror = (err) => reject(new Error('Failed to load the overlay image.'));
            overlayImg.src = overlayImgSrc;
        });
    } catch (error) {
        console.error(error);
        // If the overlay fails to load, return the canvas with just the original image
        return canvas;
    }

    // Save the current context state
    ctx.save();

    // Set the blending properties
    // Clamp opacity value between 0 and 1
    ctx.globalAlpha = Math.max(0, Math.min(1, opacity));

    // A list of valid blend modes for the 2D canvas context
    const validBlendModes = [
        'source-over', 'source-in', 'source-out', 'source-atop',
        'destination-over', 'destination-in', 'destination-out', 'destination-atop',
        'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay', 'darken',
        'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
        'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
    ];
    // 'normal' is a common alias for 'source-over'
    if (blendMode === 'normal') {
        blendMode = 'source-over';
    }

    // Use the specified blend mode, or default to 'source-over' if invalid
    ctx.globalCompositeOperation = validBlendModes.includes(blendMode) ? blendMode : 'source-over';

    // Draw the overlay image on top of the original image with the specified offset
    ctx.drawImage(overlayImg, offsetX, offsetY);

    // Restore the context to its original state (resets globalAlpha and globalCompositeOperation)
    ctx.restore();

    // Return the final canvas with the merged images
    return canvas;
}