Please bookmark this page to avoid losing your image tool!

Two Photo Side By Side Merger Tool

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

async function processImage(originalImg, secondImgSrc = '', gapWidth = 0, bgColor = '#ffffff') {
    // Ensure numeric values
    const gap = Number(gapWidth) || 0;
    
    // Helper function to load the second image from a string source (Data URL or base64)
    const loadSecondImage = (src) => {
        return new Promise((resolve) => {
            if (!src) {
                // Return original image as fallback if no second image is provided
                return resolve(originalImg); 
            }
            const img = new Image();
            img.crossOrigin = "Anonymous";
            img.onload = () => resolve(img);
            // Fallback to original image on error prevents breaking the tool
            img.onerror = () => resolve(originalImg); 
            img.src = src;
        });
    };

    const secondImg = await loadSecondImage(secondImgSrc);

    // Calculate dimensions
    // We scale the second image proportionally so its height matches the original image's height
    const targetHeight = originalImg.height;
    const secondImgScaleFactor = targetHeight / secondImg.height;
    const secondImgTargetWidth = secondImg.width * secondImgScaleFactor;
    
    const canvasWidth = originalImg.width + gap + secondImgTargetWidth;
    const canvasHeight = targetHeight;

    // Create and size the canvas
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // Fill background (visible primarily in the gap)
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw first image on the left
    ctx.drawImage(originalImg, 0, 0, originalImg.width, originalImg.height);

    // Draw second image on the right, mapped to the correct proportional width
    ctx.drawImage(secondImg, originalImg.width + gap, 0, secondImgTargetWidth, targetHeight);

    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Create a custom image tool

Description

The Two Photo Side by Side Merger Tool allows users to combine two separate images into a single horizontal composition. The tool automatically scales the second image to match the height of the first, ensuring a seamless visual alignment. Users can also customize the layout by adding a specific gap width between the images and selecting a background color to fill that space. This tool is useful for creating comparison shots, side-by-side photo collages, or ‘before and after’ visual presentations.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: