Up next in 10
Build a Next.js Canvas PDF Editor to Add Images in PDF Document Using jsPDF & Fabric.js in TS
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-next-js-canvas-pdf-editor-to-add-images-in-pdf-document-using-jspdf-fabric-js-in-typescript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:01
uh hello guys welcome to this live
0:03
stream so in this live stream we will
0:05
actually be talking about a really good
0:08
project next year's project that I
0:10
developed and this project allows you to
0:13
actually add images inside your PDF
0:16
document it is kind of a editor and you
0:19
can see that I'm running this project on
0:21
Local Host 3000 port number let me show
0:24
you the live demo of this project so as
0:27
I open this project Local Host 3,000 in
0:29
myal local development environment you
0:31
can actually see this is actually the
0:33
interface here you can actually drag and
0:36
drop your local images to this editor
0:39
right here it's a canvas editor it works
0:41
in the browser and uh you can see that
0:45
if we load the application this is the
0:47
actual interface there is a the dpin
0:50
icon and this is a plus icon if you want
0:52
to add a new page in the PDF document
0:55
you can add that so now there there are
0:57
two pages out there you can see that
0:59
this is the first page
1:00
this is a second page you can zoom in
1:03
zoom out these are the controls which
1:05
are given in the editor and now the
1:07
business part of the application now
1:09
there is a option right here where you
1:12
can actually select your local images
1:14
from your computer if you want to put
1:17
images in the PDF document you need to
1:19
Simply select that option so as you
1:22
select guys uh this drw picker will open
1:25
file picker here you can select your
1:28
image files uh any jpg PNG all image
1:32
types are supported let me select the
1:34
image so as I select the image I can
1:36
just control the positioning of the
1:38
image in the PDF document we can resize
1:41
the image like this you can see
1:43
that using the mouse you can maintain
1:46
aspect ratio you can rotate the image as
1:49
well like
1:56
this so you can see that guys uh you can
2:00
rotate it at any location in a 3D way as
2:03
well so by pressing shift button on the
2:06
keyboard you can rotate this images at
2:08
any X AIS y AIS Z AIS so after you add
2:13
this image this is the first image if
2:16
you want to add the second image in the
2:17
second page let me select that so you
2:20
will basically see this is actually we
2:23
have added the second image in the PDF
2:25
document now we have an option right
2:27
here this is actually the export but
2:29
button so if you click this button uh
2:32
your image file PDF file will be
2:35
exported as uh it will be downloaded as
2:37
an attachment if you open this PDF file
2:40
this is the image you can see it has
2:42
added in the first page this is the
2:44
second image which has been added in the
2:46
second page so this is actually
2:48
basically an image to PDF editor guys
2:50
which runs in the browser and when you
2:53
open it the very first page will be
2:55
there it will be a blank page here you
2:57
can actually select whichever image that
2:59
you want want to add right here you can
3:01
actually resize this image you can
3:03
change the size here with the mouse you
3:06
can control the positioning right here
3:08
as well you can see
3:10
that and uh if you want to add a new
3:13
page click this button so now this image
3:16
will be this uh new page will be there
3:19
so if you add this you will see the
3:21
pages will get added so if you click
3:23
this button a new page will be added in
3:25
the PDF document and there's this dpin
3:28
icon guys if you click this tpin icon
3:30
the image will be removed so if you want
3:33
to add a new image you can add this like
3:36
this if you click this the image will be
3:38
removed these are the actual control
3:40
Skies of the application that I showed
3:42
you you can rotate the image everything
3:44
you can
3:45
perform so it's a nice little editor
3:49
where you can actually add
3:51
images you can also add multiple images
3:54
as well just select it in a single page
3:56
you can even add multiple images so now
3:59
we have added two images in the first
4:01
page you will see
4:03
that you can resize them so now there
4:06
are two images present you can even add
4:09
three images as well just resizing it to
4:12
fit in a single
4:14
page so you can see that so now there
4:16
are three images present in the single
4:19
page now we come to the second page we
4:27
select so now if we are done right
4:31
here we can
4:33
actually we can select
4:39
here we need to select the page right
4:43
here so this is the image which is added
4:46
so select this
4:48
page so in all the pages the PDF you can
4:51
see the image is added now we can export
4:53
the PDF document so you will basically
4:56
see the images are added right here this
4:58
is first image second image third image
5:01
this is the thing you can see that in
5:02
all the pages so this is a very handy
5:05
editor guys you can control the
5:06
positioning resize it using your mouse
5:08
so it is coded inside nextjs and it is
5:11
using jspdf you can see that and also it
5:14
is using fabric JS and these are the two
5:17
libraries it uses it's the next year's
5:19
project if you want to purchase the full
5:21
source code guys of this project the
5:23
link is given you can directly go to my
5:25
website e-commerce website procore.com
5:28
and purchase the
5:30
project along with full documentation
5:33
and I will give you full support if any
5:36
problem occurs after the purchase and uh
5:38
if you are interested the link is given
5:40
in the description after you purchase it
5:43
from my website you will be
5:44
automatically be redirected to Google
5:46
Drive and you will actually get the zip
5:48
file that you will see the size of the
5:50
zip file is 181 megabyte so you just
5:54
need to extract the zip file it will
5:57
actually give you all this directory
5:58
structure of this project project and
6:00
simply you just need to execute this
6:03
command which is npm run Dev this is
6:06
actual development script it will start
6:09
your project on Local Host
6:11
3000 and uh I have also given the live
6:15
demo link where you can actually try out
6:17
this application on my e-commerce
6:19
website where I have given the link of I
6:22
have deployed this project on a live
6:24
website where you can experience this
6:25
editor so on the checkout page you will
6:28
see a live editor live demo link where
6:30
you can actually try out this
6:32
application before purchasing it so the
6:34
link is given guys you can directly go
6:35
to my website and purchase this project
6:37
it's a very highly engaging project you
6:40
can add multiple images to your PDF
6:42
document using this nice little editor
6:45
you need to select the image file and
6:47
you can position it you can rotate it
6:49
you can resize it you can add multiple
6:52
images as well and then there is an
6:54
export button right here it works
6:56
entirely in the browser guys no server
6:58
site code is involved it it is entirely
7:00
runs in the browser it's a fully client
7:02
side application and it's using next
7:05
chairs you will see a single file is
7:07
there PDF editor do it is coded in
7:09
typescript and you can see that it's a
7:12
very long project and about uh 289 lines
7:16
of code is there you will see that it's
7:17
a pretty large project and if I come to
7:20
the package.json so we are using these
7:22
dependencies fabricjs JS PDF so if you
7:26
don't know about fabricjs guys it's a
7:28
graphics Library
7:30
Library JavaScript canvas Library which
7:32
allows you to make this awesome little
7:35
applications canvas it's a open source
7:37
library and we are actually using that
7:40
and also we are using jspdf which is
7:42
actually a JavaScript PDF generation
7:45
Library this is their official
7:47
documentation official website the
7:49
leading HTML 5 client solution for
7:52
generating PDFs in the browser so we are
7:54
using jspdf and we are using fabric CH
7:57
so if you are interested in this react
7:59
is image to PDF editor guys the link is
8:02
given on my e-commerce website you can
8:04
directly purchase it and a live demo
8:07
link is also given so you can try out
8:09
this application before purchasing it so
8:11
I will give you full support if you have
8:13
any problem in deploying this
8:14
application so now to deploy this guys
8:17
it's very easy you can use digital Ocean
8:19
or versal to actually deploy this
8:22
application and now to build this
8:24
application there is a build command as
8:26
well given npm run build so just run
8:29
this command and it will actually create
8:32
an optimize production build for your
8:34
application in the root directory it
8:37
will create a folder a next. next folder
8:41
where you can
8:43
actually deploy this next year
8:45
application so if you're watching it for
8:47
the very first time guys please hit that
8:49
like button you can see that it has been
8:53
done that so you can run this
8:56
development npm run Dev it will first
9:00
start your Local Host 3000 it will if
9:04
you're watching it for the very first
9:05
time guys please hit that like button
9:07
subscribe the channel as well and please
9:10
share this video with your friends if
9:12
and also share my channel and if you
9:15
have still some questions regarding this
9:17
you can ask in the comment section I
9:19
will reply to all the questions so I
9:22
showed you guys it's a very engaging
9:24
editor you can add multiple images on a
9:27
single page control the positioning
9:29
resize it you will see that very
9:31
engaging editor very fast efficient and
9:35
it works pretty much every time so you
9:37
can take any image for example it's very
9:40
useful guys in online because we need to
9:43
convert or export our images to PDF
9:45
documents so it's a very nice project
9:48
and you can even show to your developer
9:52
let's suppose you are working in a
9:54
college or if you are a student if you
9:57
want to get a job so it's a very nice
9:59
project that you can show to your inside
10:03
your college so it is coded in
10:06
typescript coming back to the code so
10:08
this is actually the component we are
10:10
importing fabric J jspdf and this is the
10:14
client side component in next CH so if I
10:17
show you package.json we are using next
10:19
CH 14 version react 18 version so it is
10:22
compatible with all the latest version
10:24
of reactor next so no need to worry
10:26
about the compatibility it's compati
10:29
with all the versions you can directly
10:31
purchase it the link is given in the
10:32
description this would be a single PDF
10:35
editor. typescript file you will get so
10:38
all the project files you will get in
10:40
the zip file so documentation will also
10:43
be given and I will give you full
10:44
support if you still have any sort of
10:46
problem so thank you very much guys for
10:49
watching this video and I will be seeing
10:50
you in the next one
#Business & Productivity Software
#Other