Up next in 10
Node.js Express Project to Export PNG & JPG Images to Windows ICO File in Browser
Jan 9, 2025
Check the full description to find both links for payment in inr at stripe or usd at paypal all links are there:
Buy the full source code of the application at Stripe in INR Currency here:
https://buy.stripe.com/fZe6rI4x32WsarK1Dm
Buy the full source code of the application at Paypal in USD Currency here:
https://procodestore.com/index.php/product/node-js-express-project-to-export-png-jpg-images-to-windows-ico-file-in-browser/
Visit the Live Demo of the Tool here:
https://freemediatools.com/imagetoico
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:00
uh Hello friends today in this tutorial
0:02
I will basically show you a new tool
0:04
that I deployed on my website which lets
0:06
you convert your input image either PNG
0:09
or jpg into Windows icon of various
0:12
sizes and it will download it as a zip
0:14
file so this is a live demo of the Tour
0:16
website
0:17
and the link is given in the description
0:19
of the video you can check out the live
0:20
demo of the project so here you need to
0:24
select your input file guys so whatever
0:26
image you can select here let me select
0:28
this PNG image and after we select the
0:32
PNG image we need to Simply click
0:34
download so it will upload the file as a
0:36
progress bar and then basically it will
0:38
download a zip file
0:40
it will contain the icons Windows icons
0:44
of various sizes and it will basically
0:46
download it as a zip file you will see
0:49
that 16x16
0:52
32 by 32
0:54
so very small icons so this is used for
0:56
applications so if you are making your
0:58
application you need these icons if you
1:00
are uploading your Android application
1:02
then you need to have a logo of various
1:04
sizes 16 by 16 32 by 32 48 by 48 say 96
1:10
128 by 128 so you can see it has
1:14
transformed the input image into various
1:16
sizes of icons 512 by 512
1:21
and last one is one zero two eight by
1:24
one zero two eight so these are
1:25
different sizes of the icons which are
1:27
most preferred
1:30
so this is IO the extension of the file
1:33
is Windows icon Ico
1:36
so this is the windows icon file
1:39
dot Ico this is the extension dot Ico
1:43
these are windows icon files
1:47
so if you want to convert you have seen
1:51
these converters image to icoff so we
1:53
will basically build this converter in
1:55
this tutorial I will be showing you in
1:57
node.json express how to build this from
2:00
scratch so if you want the full source
2:01
code of this application you can go to
2:04
the description you where you can
2:05
basically purchase the full source code
2:07
after you purchase it you will get this
2:09
directory structure
2:11
and we are using a python script for
2:13
this we are using the pillow library in
2:15
order to convert the image into icons
2:18
you can get the full source code now let
2:21
me show you how I build this so first of
2:23
all
2:24
I will show you the python script
2:27
how I did that
2:29
so for that you need to first of all
2:31
install this module which is pillow
2:33
paper install Pi double l o w
2:36
so this is the module which will be
2:38
required for this purpose and now after
2:41
that we will basically write the python
2:43
script we will require the system module
2:45
we will require the operating system
2:48
module and we will import the pillow
2:51
Library p i double pil from that we will
2:55
import the image
2:57
method and also we will be importing the
3:00
zip file
3:03
and now guys we will basically
3:08
call
3:12
fuel check here if the length of system
3:16
8 is not equal to 3
3:19
we will pass arguments to this python
3:22
script right here
3:24
and you will simply print out if it is
3:26
not equal then we will say that we need
3:29
to run this script as
3:32
input image you need to provide the
3:34
input image this can be either jpg or
3:36
PNG and then we need to also provide
3:39
here the output zip file so this can be
3:43
output zip any thing you can call
3:46
and here we will have the else block if
3:49
the user has provided the input image
3:52
path we can get this using system.argv
3:55
one and then we can say output zip path
4:00
we can get it using system Dot
4:03
argv to
4:05
and then we can say icon paths this we
4:08
can basically declare it as empty array
4:10
for now so here we can Define the sizes
4:13
guys
4:14
so inside this you can Define the
4:17
different sizes 16 by 16
4:20
and then 32 by 32
4:23
various sizes if you need 48 by 48
4:29
96 by 96
4:33
so these are different sizes guys you
4:35
can declare here 128 by 128.
4:39
256 by 256.
4:43
and 5 1 12. by 512
4:49
and 1 0 2 8 1 0 2 8.
4:55
so these are different sizes after
4:57
declaring the sizes guys we can run a
4:59
for Loop
5:00
and inside the for Loop we can say
5:03
output icon path this will be equal to
5:08
this is slightly complicated code guys
5:10
and let me just show you what has
5:16
this is a python script for doing this
5:19
process so here we are basically calling
5:22
this method which is convert to IQ and
5:24
here we are passing the input image path
5:26
and also the output icon path and the
5:29
size as well
5:30
and then we need to create the zip file
5:33
we will provide these two arguments
5:35
output zip file and icon path so now we
5:39
need to Define these two functions guys
5:41
this is slightly complicated so what I
5:44
will do I will simply copy paste it
5:48
just paste it right here
5:50
so these two functions are basically
5:52
doing the thing guys it is now
5:53
converting the image file into Ico file
5:56
which is icon file we are using the
5:58
image dot open method first of all we
6:00
are opening the image then we are
6:02
resizing the image to that I dimensions
6:06
and then we are saving it and this is
6:08
most important thing guys
6:10
if I show you the format thing so this
6:13
is ICO which is a Windows icon file so
6:16
here we are converting this
6:19
and then lastly we are creating a zip
6:21
file guys output zip file
6:25
then we are writing the file that's all
6:27
so this is actually the python script
6:28
now we will basically go to our node.js
6:31
application and
6:33
here we have done the same thing for
6:36
this we are using some modules if you
6:39
see we are using Express module npmi
6:42
Express malter we are also using this
6:44
Library guys which is
6:53
this is the module that we are using
6:57
so just to install this module
7:06
so after doing this we are uploading the
7:08
files so basically here we have made
7:10
this directory as static so inside
7:13
public directory we have made a
7:15
directory called as uploads so in this
7:17
directory we will be uploading all our
7:19
image files which will be uploaded and
7:21
inside this index.html file we have a
7:24
basically a input field where we allow
7:26
the user to upload the image file then
7:28
we have a progress bar and then we have
7:31
a button
7:32
right here inside jQuery we are
7:34
basically having event handlers
7:37
to put the format this will be PNG
7:43
so we also have validation if you don't
7:45
upload image files you will say please
7:47
upload image file
7:49
so here we are making two upload
7:51
requests guys post request upload image
7:53
to IQ first we will upload the file and
7:57
then after uploading it we will
7:58
basically convert the image to Ico this
8:02
is the second post request so here we
8:04
will actually pass the path and the
8:06
actual format
8:08
so now guys we will basically
8:12
make upload
8:15
sorry the request Here app dot post
8:18
slash upload image to IQ
8:22
and
8:24
here we will basically
8:27
upload the file
8:35
basically pass the path here so this
8:39
path will be request.file.path this is
8:42
the first request guys and if you
8:44
refresh the application if I go to the
8:47
application and run it localhost
8:51
Boardman
8:53
index.js so now the application is
8:56
running on port number 3000
9:03
so this is the interface and now if I
9:05
select a image click on that so now you
9:08
can see the file uploaded now processing
9:10
if you see the console we have actually
9:12
got the path here upload successful we
9:15
have got the PNG path now we need to see
9:18
simply download the zip file which will
9:21
contain icons of different sizes for
9:24
that we will basically
9:28
make that post request
9:32
image to Ico
9:34
and we will make it a async function
9:37
right here async function and right here
9:40
there is also a library guys which will
9:42
convert image to icons
9:44
this is a node.js module that we
9:46
installed right here you can also do it
9:48
right here also npmi image to I
9:52
this is a module that we are using guys
9:54
if you go to npmgs.com
9:58
have a module which automatically
10:01
converts your input image to a Windows
10:03
icons this is a module that we are using
10:06
so simply install this npmi
10:12
and uh
10:14
after doing this guys we will basically
10:16
have the sizes
10:18
16 32 48 96
10:23
128
10:25
5
10:27
1 2 1 0 2 8.
10:31
and we are missing 256.
10:36
so these are different sizes and after
10:39
that we will basically say
10:41
we will run a map operator here async
10:45
size and
10:48
you make it a buffer duf and we will
10:52
wait image to IQ we'll call that Library
10:55
request.body.path
10:58
and right here
11:06
let me just see what is the problem
11:08
const POF of it
11:12
image to IQ request dot body dot path
11:20
size we will provide here the size will
11:22
be size comma size
11:24
and quality here we can even control the
11:27
quality of the icon as well I will give
11:29
100 third option is gray sale you will
11:32
put it to false
11:33
and then we will simply return the
11:35
actual size and the buffer
11:40
and we will basically call promise dot
11:43
all and we will pass the promises right
11:46
here
11:49
this will return basically we can run
11:52
handle it by dot then you will have the
11:55
results out there inside this we will
11:57
make a zip file
12:00
date dot now icons Dot
12:03
zip
12:05
and then we will basically download it
12:07
as attachment so we will create write
12:10
stream
12:11
we will create that zip file
12:13
and then we will make use of that
12:16
archive
12:17
to push all the files in the zip file
12:21
and in the second we will use zlib and
12:25
here the level will be 9.
12:30
you can provide any level of your choice
12:33
so after doing this we will basically
12:36
say that our chip dot pipe
12:40
output
12:42
and we will basically run a for Loop
12:44
here
12:45
for each Loop sorry
12:52
for each result basically we will
12:55
just
12:56
append this file in the zip file so
12:59
archive append method is there
13:02
we will say result dot buffer and we
13:06
will put the name of the file
13:08
which will be
13:10
result.size
13:15
cross
13:24
um
13:28
let me see what this
13:31
okay result.size
13:38
extension is ICO that's all
13:43
and after that guys
13:49
we will say archive dot finalize
13:54
and then output Dot close close event we
13:59
will basically
14:01
pass it to the client side the path of
14:04
the zip file which needs to be
14:05
downloaded
14:08
so if any sort of error take place guys
14:11
we will also have a DOT catch as well
14:15
for the
14:17
and lastly we have defined a download
14:19
request guys here you can see app.get
14:21
Slash download so this will actually
14:23
download the zip file as an attachment
14:27
so right here we are basically calling
14:29
this get request slash download
14:32
if you refresh your application what
14:34
will happen now now
14:39
you need to restart the server
14:48
click
14:50
so now you can see that your zip files
14:52
have been created 16 by 16.
14:55
260 256 by 256 1028
15:00
so in this way guys you can create this
15:03
converter image to Windows icon
15:05
converter of different sizes the source
15:08
code I have given guys in the
15:10
description you can purchase it you will
15:11
get this directory structure and I have
15:15
also shown you a python script where you
15:17
can do it automatically or you can
15:18
basically use the node.js application in
15:21
the browser itself and the live demo is
15:23
given in the description link you can
15:25
check out my live application which is
15:27
deployed before you purchase it you can
15:30
go to
15:32
www.freemediatools.com to check out more
15:33
tools as well
15:35
so this tool that I deployed the link is
15:38
given image to IQ converter thank you
15:40
very much guys for watching this video
15:42
and I will be seeing you in the next one