').attr('src', img.src);
imagePreview.append(imgElement);
};
};
reader.readAsDataURL(files[i]);
}
joinButton.show();
}function joinImages() {
var canvasWidth, canvasHeight;if (layout === 'vertical') {
canvasWidth = Math.max(...images.map(img => img.width));
canvasHeight = images.reduce((sum, img) => sum + img.height, 0);
} else if (layout === 'horizontal') {
canvasWidth = images.reduce((sum, img) => sum + img.width, 0);
canvasHeight = Math.max(...images.map(img => img.height));
} else if (layout === 'square' || layout === 'rectangle') {
// For square and rectangle, we assume grid-based layouts
var gridSize = Math.ceil(Math.sqrt(images.length));
canvasWidth = gridSize * images[0].width;
canvasHeight = gridSize * images[0].height;
}resultCanvas.attr({ width: canvasWidth, height: canvasHeight });
var ctx = resultCanvas.get(0).getContext('2d');
ctx.clearRect(0, 0, canvasWidth, canvasHeight);if (layout === 'vertical') {
var y = 0;
images.forEach(function(img) {
ctx.drawImage(img, 0, y);
y += img.height;
});
} else if (layout === 'horizontal') {
var x = 0;
images.forEach(function(img) {
ctx.drawImage(img, x, 0);
x += img.width;
});
} else if (layout === 'square' || layout === 'rectangle') {
var gridSize = Math.ceil(Math.sqrt(images.length));
var x = 0, y = 0;
images.forEach(function(img, index) {
ctx.drawImage(img, x, y);
x += img.width;
if ((index + 1) % gridSize === 0) {
x = 0;
y += img.height;
}
});
}downloadButton.show();
}joinButton.on("click", function() {
joinButton.hide();
joinImages();
});downloadButton.on("click", function() {
var dataUrl = resultCanvas.get(0).toDataURL();
var a = document.createElement('a');
a.href = dataUrl;
a.download = 'merged-image.png';
a.style.display = 'none';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
downloadButton.hide();
});
});
