function processImage(originalImg, count = 5, layout = 'horizontal', gap = 0, bgColor = 'transparent') {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const w = originalImg.width;
const h = originalImg.height;
// Parse numeric inputs
count = parseInt(count, 10);
gap = parseInt(gap, 10);
// Fallbacks
if (isNaN(count) || count < 1) count = 5;
if (isNaN(gap) || gap < 0) gap = 0;
// Determine canvas dimensions based on layout
if (layout === 'horizontal') {
canvas.width = (w * count) + (gap * (count - 1));
canvas.height = h;
} else {
canvas.width = w;
canvas.height = (h * count) + (gap * (count - 1));
}
// Set background color if not transparent
if (bgColor && bgColor.toLowerCase() !== 'transparent') {
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Draw the image duplicates
for (let i = 0; i < count; i++) {
if (layout === 'horizontal') {
ctx.drawImage(originalImg, i * (w + gap), 0, w, h);
} else {
ctx.drawImage(originalImg, 0, i * (h + gap), w, h);
}
}
return canvas;
}The Image Fifth Duplicate Creator allows you to multiply a single image into a series of identical copies arranged in a specific layout. Users can choose between horizontal or vertical arrangements and customize the output by adjusting the number of duplicates, adding spacing (gaps) between the images, or selecting a specific background color. This tool is useful for creating repeating patterns, seamless textures, social media assets, or design elements for web and print media.