Javascript is a programming language for the web. We can use it to create very useful things such as libraries, so users can easily use the benefits of this programming language with less code. Today I will show you a javascript library for fast joining photos, useful for creating featured images or banners for websites like gsmarena.com where users can compare two or more mobile phones.
Photojoiner is a javascript lightweight library (880 B) for joining photos. You can use this library without jQuery.
Basic usage
Load photojoiner.js or photojoiner.min.js at the end of the document ( to stop render-blocking )
// Array of images, static or dynamically added with .push() method
const images = ['http://b-i.forbesimg.com/larrymagid/files/2013/04/galaxy1.jpg',
'https://www.trylumiaphone.com/images/home/phone2.png'];
// Send images array as a parameter, required
photojoiner.join({
'images' : images
});
Advanced usage
Except for required parameter images, you can pass more parameters to adjust photojoiner
images
The array of URLs. This parameter is required
photojoiner.join({
'images' : ['image1.jpg','image2.jpg','image3.jpg']
});
canvasHeight
An integer value for the height of the container. The default value is 350 which means, the output image will be with a height of 350px, and pictures will be scaled to the height
photojoiner.join({
'images' : ['image1.jpg','image2.jpg','image3.jpg'],
'canvasHeight': 500
});
canvas
HTML dom node. Default is canvas element with id joined. You can send your own canvas element
photojoiner.join({
'images' : ['image1.jpg','image2.jpg','image3.jpg'],
'canvas':document.getElementById('my_canvas_element')
});
How many pictures can you join?
You can join unlimited number of pictures. Send urls of the pictures as a parameter, and photojoiner will join all pictures.
Example output with more than two pictures
const images = ['http://cdn2.gsmarena.com/vv/bigpic/xolo-black-2015.jpg','http://cdn2.gsmarena.com/vv/bigpic/xiaomi-mi4i.jpg','http://cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-grand-prime-sm-g530h.jpg','http://cdn2.gsmarena.com/vv/bigpic/apple-iphone-5c-new1.jpg','http://cdn2.gsmarena.com/vv/bigpic/apple-iphone-6-3.jpg'];
photojoiner.join({
'images' : images,
'canvasHeight':200
});

Check how it works here
This library you can download from github