Build a Canvas API Example to Merge Multiple Images in Horizontal & Vertical Direction Using JS

uh hello guys in this video we will be developing a image merger kind of a web

application which allows you to actually select one or multiple image files and

it can either merge the image files in a horizontal direction or it can merge it in the vertical Direction so you can see

we have a radio button out there either you can select horizontal or vertical this is the direction of merging

concatenation joining the multiple imag so we have developed this interface using Tailwind CSS so we allow the user

to Simply select the image files either you can select PNG jpg all extensions are

supported so let me take an example here let me select these two

images and then if I select the direction here if I want to merge it

horizontally I will select that and click this button and now you will see

that the output will be shown right here below these two images are successfully merged into a single image so now you

can download This by clicking the download button and you will actually open the image you will see that both

these images are now merged into a single image in a horizontal

Direction alongside the x-axis so if you want to do the reversal

here if you want to join it vertically you will select the radio button of vertical and click on merge images and

now the light preview changes so now the images are showing in a vertical Direction Still this is a same image

it's contains in a single image but uh the direction has been changed but now

if you open the the image output image you will actually see the direction the images are appearing in a vertical

Direction alongside with the Y AIS so you can take as many images as example

so sometimes we want to join multiple images into a single image just to save

some space so you can take as many images as you want so it is recommended that you take

images with same dimensions to get the clear result so as you can see we have

selected five images you can select as many images and now you can

see all these five images has been merged into a single image so if you try

to open this the size obviously will be larger but you you can see that all the

five images content is merged into a single image and same goes with the vertical as

well you can see that so this kind of images are used in tap typically in

making cages Gallery so you can just see here so we will be using the basic

canvas API which is available for every browser in JavaScript we will not be using any third party library for

building this we'll be using HTML CSS and JavaScript and for building the UI

we'll be using Tailwind CSS so let's start building this so just create a single index.html file and just make an

interface and just give it a title image merger web app in

JavaScript and for Tailwind CSS we do need to include the CDM so just after the title just copy paste the CDN

link and inside your body you need to give some Tailwind classes to actually

change the background color to BG gray the shade is 100 padding will be

four and then inside this we will have a d tag which will be responsible for

aligning the content we will be giving all these classes of Tailwind B G

white padding will be six and it will be rounded it will also

have Shadow as well inside this we will have an heading

right here which will say image merger we give it a class here as well

text to excel font will be

bold so if you try to open this now you will actually see a card like structure

in the middle of the screen and we have contain a heading right here image merger and after this we will allow the

user to have a form we give it an ID here so that we

can Target in JavaScript image merger form give it a class as well margin

bottom four and then a div tag so here you'll

be give it a label right here we will

simply say here select images so we will allow the user to Simply

select images from a input field it will be a block element text color will be

gray text will be small font

bold so after this uh label we will have this input field of type five

and we will only be accepting images files so we'll simply say image/ star and it is

required and give it an ID here of image files so that we can Target in

JavaScript so if you refresh now you will see this one and just give it a

Tailwind class margin top two just to give some

spacing so now it is looking good so after this we will have a button to

actually submit the form but also we will also be having a

radio button for selecting the direction of

margin so we will have two options either horizontal or vertical

so it will simply say merged Direction so we will have two

choices either the user can merge the images in a horizontal

direction or they can select vertical Direction

so all the source code will be given in the description so I'm just uh copy pasting this HTML for these

choices just to save some time right here let me paste

it so now you have two radio buttons uh uh at one moment of time you can only

select one so either you can select horizontal or vertical

so the main thing is that the type parameter here is Radio we have given a

class of it Tailwind class form radio and we have given this name parameter if

you see this merg direction to both these input Fields radio buttons so

you'll be targeting it in the JavaScript whenever you want to get the value what

the user has selected either horizontal or vertical by default horizontal will be checked when you load the application

for the very first time so I think this is all the HTML which is

needed and just after this we will have a button as well to submit the form so

just have a button the label of the button will be merg images and button

type will be of submit to submit the form

and the background color of the button will be BG blue 500

when we hover onto the button it changes to 700 shade text color will be white 4

volt padding by 2 PX 4 and uh it will

also be rounded if you refresh now you will see this button as well so the UI

is complete so now we come to the JavaScript part so we will write the

JavaScript code in a different file so let me create a file

script.js so right here we will

select the element the form here image merger we have given that ID in the HTML

we will be binding an event listener to it so when the form submits this event this call back function will execute and

uh first of all it will prevent the auto submission of the form by invoking E do driven default then we need to get the

merge Direction which the user has selected so for that we can use cery

selector and we have given the name parameter to it so now to Target this inside JavaScript we write input square

brackets then the name parameter right here so we have given this name parameter which is merged Direction and

we need to get the value which which is checked so you'll write here colon

checked and then Dash value so this will actually get the value of the radio

button either horizontal or vertical this is the actual selector you can

pause the video Just You have given this name parameter merge Direction underscore checked underscore value or

dot value so after getting

this we will get the images which is selected by the user by using we have

given an ID here of image files to get the files selected we will

use the dot files property so here we are using vanilla

JavaScript we haven't used jQuery at all so this is all

JavaScript and here we'll be comparing if this selected image files length is

uh smaller than to so user must at least select two files to actually merged so

if they selected only a single file then we will say to the user that please select at least two

images and we will simply return from the program that's all we will not

execute the rest of the code so if the images are greater than

two in that case we will call a function which will we will be making this custom

function and we will be passing this array from image files we will be creating an

array from this image files and we will be passing it as an argument to this custom function now we need to Define

this custom function load images it will take this files as an

argument it will return return a promise so write

after this we can handle the Promise by dot then you'll get the images returned and

uh we can just console log it for now now we need to basically return a

promise from this function because we are using dot then so right here we'll be making a variable of promises files

start we'll use the map operator in uh JavaScript and for each file which is

selected by the user we will actually read that file first of all by using the file reader

API file reader API will read the file and it contains a uh event called

as onload and uh we will instantiate a new

image Constructor and you'll simply say image. source is equal to event. Target do

result event. target. result typically return Returns the base 64 code of this

image because we are making a new Constructor of this image Constructor file reader API

uses Canvas 2 Data URL function which Returns the base 64 code of the image in

this way we read the images in memory whenever we make applications related to

images this is a very common way of reading images and then we we have this

onload function of every image and here we can resolve the

Promise by passing this image if any sort of error take place

then we can reject the promise like this and just outside this we need to

call this uh most important function which is read as data URL which will

return the base 64 code of the image file

so this is really important and after this outside

this uh I think const

promises I think some brackets are creating uh

file return new promise resolve reject okay we forgot to return a

promise from this function just after this line we do need to say return

because we are returning promises from this so we simply say return new promise either this promise can resolve or it

can reject like this

so just wrap this

code uh now is it is looking good you can see we are using resolve and reject

because we are passing it it is returning a new promise just outside this statement we will simply say return

this promise we call the all function

and pass this promises that we have this

variable that we are passing it so now we will get these images if

you check your console if I select a bunch of images

uh as you can see we can only select a single file because we haven't given that attribute of multiple just attach

this attribute of multiple so that we can select multiple images so if you

select all these images and click that button of merge

images you will actually see this uh images will be returned to

us all these images will be successfully read and it will be returned to us this

is actually the base 64 code that I I was talking about so first of all how

this program executes let me just understand you first of all this function takes place this if condition

take place if the images are greater than two then we call this function custom function then actually all the

files which are selected by the user comes into this function we actually read file one file at time and we read

it using file reader API then we read the base 64 code by using this function

read as data URL and then we pass this as a promise and we handle this Promise

by dot then and console log these images which are coming which are five images

for each image we are getting this base 64 code if you closely look in the

current Source directory you can see so now after we successfully read

the files we can now merge it so for merging it we will create a

variable which is merged image and call a custom function

merged images you will pass these images as argument and

merged a second argument that we need to pass here here which will be the merged Direction

so we will be passing both of these values as arguments to this

function so now we need to actually make this function just out uh

below that merged

image uh I call this as merged images

so it takes the files and the merge Direction has two

arguments so here you'll be using the canvas API first of all we do need to get the canvas so we will create a new

element by using Create element function in JavaScript canvas dynamically then we

will be setting the content context in order to get the context we use the get context

function we need to get the 2D context then we need to Simply select a

if condition we need to check the merge direction if the merge direction is

equal to horizontal then in that case we need to

merge the images in the horizontal direction we need to calculate the width for that we simply use the reduce

function of JavaScript high level function so here we actually take this two parameters sum

and image and for

each so here we actually for each image we calculate the

width we introduce a new variable right here sum if you see we

actually sum Plus whatever is the width of the image and uh then we pass zero right

here this is just a mathematical formula which is used to actually uh merge

images in a horizontal Direction you just need to write it and then we have

calculate the height as well the maximum height this you can control we are using

the math. max function and then we use this uh dot dot dot operator to

actually uh merge all these images so dot dot dot is the operator which is

used to copy all the elements in an array and then we use the map

operator and we will be for each

image the height will be the same so we will simply say image. height because

for merging images in the horizontal Direction height will not change only the width will change so that's why we

calculated the width and the height will remain the same so that's

why after this we can simply say canvas. width is equal to Total width and

canvas. height is equal to Max

height so so after this we do need to also calculate the offset X offset

declare it to zero and for each image we use the for each

Loop we will the context we will draw the image on the

canvas pass it the first parameter and we will have this offset zero and then

we will offset we will increment this

value by the width of the image like this so by default the offset value is

zero but we are looping through all the images and we use the draw image

function of the canvas API to actually draw this image on onto the canvas here

offset is zero but now we actually incrementing the offset value by the width of the image so whatever is the

width we increment that offset value so in this way we merge images in

the horizontal Direction by use of this offset variable so after this we have the ls if

condition and this one if the merg direction is equal to Vertical

so all the things will remain the same but we will change this time to calculate the height the width will

remain the same in case of vertical Direction so for that we will calculate

the height total

height and we will again use the same formula image. reduce and sum

image so you can just see we are using the same formula that we did to actually

merge images in horizontal Direction this time we are calculating the height so that's why image. height zero the

width will remain the same so max width math do Max dot dot dot images do

map and for each image the width will remain the same so

image.

width image. width

so after that we need to set the canvas width and canvas height similarly that will uh set this uh earlier canvas width

is equal to Max width and canvas height is equal

to Total height and then again we'll be introducing a offset variable we will

set it to zero and then again we'll be looping through all the images which needs to be merged by using the for each

Loop for each image we will be drawing this image by

using the draw image function image zero and uh just call this as y offset

because this is this offset variable will be working in the y direction vertical Direction that's why y offset

and that we call this an X offset because it's there in the x-axis

horizontal so after you do this just use this variable y offset and once again

we'll be increasing the offset variable whatever is the height of the image so

plus is equal to image do height so same formula you can go observe right here

here we are working with width and here we are working with height so

depending upon whether you are there in the horizontal direction or vertical Direction This is simple mathematics so

after you do this you need to download the image as an attachment so first of all we do need

to return the base 64 code of the image again we'll be using the same function

canvas to data URL so this Returns the base 64 code of the

image and as a PNG image so you can even do jpg here also but we will be sticking

to the PNG image so this returns a base 64

code and right here where we are calling this function we will get this value now

we need to Simply display this image display the merged output image for that we will once again create

another function display merged image and we will get this code paste 64

code and we'll pass it as an argument and now we need to make this

function right here let me Define it right

here and for uh actually displaying this this image in

the output we do need to make some changes in the HTML we do need to have a

image tack just below this button just below the

form so you'll have a div we'll give it an ID here so that we can Target in

JavaScript image

preview give it a class of hidden by default it will not be shown to the user whenever you load the page for the very

first time I have a H2 heading right here which will be

merged image

preview text large phone

B and then after that you will have image tag you'll give it an ID here of

preview

image class of preview

image after this you will have a anchor tag which will be useful to download the

image you give it an ID to this also download button give it a class here BG blue

500 text will be

wi it will be rounded margin top 4 and

it will be hidden by default it will not be shown and we'll also be giving an attribute to it of uh download because

it's a download button so we given this attribute of download the label will

simply be saying

download merged image so here this download attribute

you can also provide a default file name so you can simply say out

merged image.png this will be the default file name given whenever you click the

download button that's all in the HTML and coming back to the JavaScript we do

need to show the image for showing it we need to get

references so preview image document. get element by ID

preview image and the download

button so after getting this both the references we do need to manipulate the

source parameter just make it merged image and then

for when the onload function uh when the image is loaded

successfully then we need to show the download button for

that we need to remove the hidden parameter first of all attribute that we

given you can simply say class list do

remove then we also need to download button href merged

image and also download button class list.

remove hidden so now the download button will be shown to the user

that's all this completes the application if I reload the application choose

uh these three files select the direction

vertical click on this button you will see uh on script line number 57 it is

saying that uh images is not defined

uh let me check uh line number

57 okay okay we call this as files you can see we are calling it as files just

rename this to images so just make this

change and then select images these four images in the horizontal Direction and

now you will see that the output is shown to the in the merged image preview section all these four Images have been

successfully merged into a single image if you click the download button your image will be downloaded and now you can

see the output image all these four Images are merged in a single

image and same goes with the vertical as well click on merge and you will see it

will be merged in the vertical Direction

all the source code is given in the description of this video and do check out my website as well guys free mediat

tools.com uh you will find a lot more tools I also deployed this tool merge

images you can try this tool online by visiting this website horizontal vertical alongside

thousands of more tools are there free tools you can try so keep visiting this website for

more tools I will update tools on a regular basis on this website so free

media tools and thank you very much for watching this video and I will be seeing you in the next one