function processImage(originalImg, gapSize = 0, backgroundColor = "#ffffff") {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Maintain the original image dimensions
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
// Parse gap securely and ensure it doesn't exceed image dimensions
const gap = Math.min(Math.max(0, Number(gapSize) || 0), Math.min(width, height) / 2);
// Fill the background if a gap is specified
if (gap > 0) {
ctx.fillStyle = String(backgroundColor);
ctx.fillRect(0, 0, width, height);
}
// Calculate the size of each copy, accounting for the gap in the center
const copyWidth = (width - gap) / 2;
const copyHeight = (height - gap) / 2;
// Draw Top-Left Copy
ctx.drawImage(originalImg, 0, 0, copyWidth, copyHeight);
// Draw Top-Right Copy
ctx.drawImage(originalImg, copyWidth + gap, 0, copyWidth, copyHeight);
// Draw Bottom-Left Copy
ctx.drawImage(originalImg, 0, copyHeight + gap, copyWidth, copyHeight);
// Draw Bottom-Right Copy
ctx.drawImage(originalImg, copyWidth + gap, copyHeight + gap, copyWidth, copyHeight);
return canvas;
}This tool creates a visual effect by splitting a single image into four smaller, identical copies arranged in a grid pattern. Users can customize the output by adjusting the size of the gap between the copies and selecting a background color to fill the spaces. This effect is useful for creating stylized social media posts, artistic collages, or unique patterns for digital design projects.