Hi,
This can’t be done directly by using “texture from text” or “generate normal map” puzzles but the approach is similar (and also very close to what merge-images.js does).
If you don’t want to have an additional dependency in your project you can just write a simple function specifically for your needs:
function combine(imgSources) {
return Promise.all(imgSources.map(function(url) {
// load all images
return new Promise(function(resolve) {
var img = new Image();
img.onload = function() { resolve(img); };
img.src = url;
});
})).then(function(images) {
// create a canvas with required dimensions
var canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 512;
// draw images to the canvas
var ctx = canvas.getContext('2d');
ctx.drawImage(images[0], 0, 0);
ctx.drawImage(images[1], 512, 0);
ctx.drawImage(images[2], 1024, 0);
ctx.drawImage(images[3], 1536, 0);
// return the resulting image in base64 form
return canvas.toDataURL('image/jpeg');
});
}
It loads all the given images and after they are ready creates a canvas with dimensions 2048×512. Then it just draws all the images into the canvas with some offsets that you can specify in ctx.drawImage. The function returns a string in base64 format which looks like data:image/jpeg;base64,/9j/4AAQSkZJRgABA....
You can use it to create and add a new image onto the page:
combine(['1.jpg', '2.jpg', '3.jpg', '4.jpg']).then(function(result) {
var img = new Image();
img.src = result;
document.body.appendChild(img);
});
Btw, if you use this canvas approach there’s a limit for the maximum width and height for the combined image: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#Maximum_canvas_size
Co-founder and lead developer at Soft8Soft.
.
