Join multiple photos with pure javascript library

Javascript is a programming language for the web. We can use to create very useful things such as libraries, that users can easily use the benefits of this programming language with less code. Today i will show you javascript library for fast joining photos, useful for creating featured images or banners for web sites 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 in the end of the document ( to stop render blocking )


<script type="text/javascript" src="photojoiner.js"></script>
<script>
// Array of images, static or dynamically added with .push() method
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
});
</script>

Advanced usage

Except required parameter images, you can pass more parameters to adjust photojoiner

images

Array of urls. This parameter is required


photojoiner.join({
   'images' : ['image1.jpg','image2.jpg','image3.jpg']
});

canvasHeight

Integer value for height of the container. Default value is 350 that means, the output image will be with height of 350px and pictures will bi 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 i 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


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
});
image

Check how it works here

This library you can download from github

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s