Merge Images Side by Side

Combine multiple images into a single image by placing them side by side horizontally or vertically.

Request Parameters

Response

Returns a single image containing all input images merged side by side in the specified direction.

Example Request

    // example.sh
curl -X POST "https://oyyi.xyz/api/image/merge-side-by-side"   -H "accept: application/json" \
  -H "Content-Type: multipart/form-data" \
  -F "files=@image1.jpg" \
  -F "files=@image2.jpg" \
  -F "files=@image3.jpg" \
  --output merged.jpg
  

Example with Python

    // merge_images.py
import requests

url = "https://oyyi.xyz/api/image/merge-side-by-side"

files = [
    ('files', open('image1.jpg', 'rb')),
    ('files', open('image2.jpg', 'rb')),
    ('files', open('image3.jpg', 'rb'))
]

data = {}

response = requests.post(url, files=files, data=data)

# Save the merged image
with open('merged.jpg', 'wb') as f:
    f.write(response.content)
  

Example with JavaScript

    // merge_images.js
// Using fetch API
const formData = new FormData();

// Add multiple images
for (const file of imageFilesInput.files) {
  formData.append('files', file);
}

fetch('https://oyyi.xyz/api/image/merge-side-by-side', {
  method: 'POST',
  body: formData
})
.then(response => response.blob())
.then(blob => {
  // Create a URL for the blob
  const url = URL.createObjectURL(blob);

  // Create a link to download the image
  const a = document.createElement('a');
  a.href = url;
  a.download = 'merged.jpg';
  a.click();

  // Clean up by revoking the URL
  URL.revokeObjectURL(url);
})
.catch(error => console.error('Error:', error));
  

Merge Directions

Resize Methods

How It Works

The merge-side-by-side endpoint combines multiple images into a single composite image:

1. Image Loading: All uploaded images are loaded and processed.
2. Resizing (Optional): If a resize method is specified, images are resized according to the selected method.
3. Canvas Creation: A new canvas is created with dimensions large enough to hold all images plus spacing and padding.
4. Image Placement: Each image is placed on the canvas in the specified direction with the specified spacing.
5. Alignment: Images are aligned according to the specified alignment option.
6. Background Filling: Any spacing or padding areas are filled with the specified background color.
7. Output Generation: The final composite image is generated in the specified output format.

The result is a single image containing all input images arranged side by side or stacked vertically.

Error Responses

Notes

• You can upload up to 10 images in a single request.
• The order of the images in the merged result will match the order they were uploaded.
• For best results with images of different sizes, use the resize_method parameter to ensure consistent dimensions.
• The spacing parameter is useful for creating visual separation between images.
• When using transparent PNG images, the background color will be visible through transparent areas.
• The maximum file size allowed for each image is 10MB, with a total limit of 50MB for all images combined.
• For creating complex layouts with multiple rows and columns, you may need to make multiple API calls and combine the results.

Use Cases

• Creating before/after comparison images
• Combining multiple screenshots into a single image
• Creating photo collages or galleries
• Generating product comparison images
• Creating timeline or sequence visualizations
• Combining charts or graphs for reports
• Creating panoramic images by stitching photos horizontally
• Generating social media content with multiple images