Up next in 10
Build a Vue.js 3 Modal Image Cropper With Live Preview Using vue-picture-cropper in TypeScript
Jan 13, 2025
Get the full source code of application here:
https://codingshiksha.com/vue/build-a-vue-js-3-modal-image-cropper-with-live-preview-using-vue-picture-cropper-in-typescript/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you yet
0:04
another VJs 3 package for image
0:08
cropping it's again a model popup kind
0:11
of a package where you can perform your
0:13
image cropping in a model window so we
0:16
have this choose file button whenever I
0:18
click this
0:19
button I will be able to select my image
0:22
and now this image will open in this
0:24
image Cropper where I can perform the
0:26
cropping capabilities I can crop any
0:29
portion of the image and there is two B
0:32
buttons there crop image so if I click
0:35
this button your image is cropped and
0:37
then you can save this image file inside
0:39
your computer so let me show you the
0:42
package here uh this is essentially
0:44
called as the package is view picture
0:48
Cropper so if you go to npmjs.com just
0:51
search for this package view picture
0:55
Cropper so this is actually a simple and
0:59
easy
1:00
component to crop your images so
1:04
specifically for vuejs 3 the latest
1:07
version the command is simple you
1:09
install this and it almost have 4,000
1:13
weekly downloads so they do have a
1:15
official website this is their official
1:17
website and they do have have a nice
1:20
little documentation so now to get
1:23
started uh using using this module we
1:26
come to your app. view file so we we
1:30
need to edit this file so first of all
1:33
we will write the template where we'll
1:35
be writing the HTML code then our
1:37
typescript code in this script
1:41
tag so here we first of all import the
1:48
module so all the source code that I
1:51
will use in this video is given in the
1:53
description of this video so you can go
1:55
to the description and get the full
1:57
source code so so first of all
2:02
uh right in the script here I will
2:05
change the language because we are
2:07
writing typescript code so we'll say it
2:09
languages typescript and then
2:12
we
2:15
Define we import the base UJS package
2:19
and then we import this package view
2:21
picture
2:24
Cropper and also the Cropper method as
2:27
well coming from view picture
2:31
Cropper and then we export this
2:33
component by using Define
2:36
component so whatever components that we
2:38
are using so we using view picture
2:40
Cropper and whatever data that you want
2:43
to
2:43
use so I will be using this data so one
2:47
state variable is show model false so
2:51
there's a Boolean parameter is show
2:53
model by default it is false but we will
2:56
be changing it whenever I click the
2:58
buttons and then whatever is the input
3:00
image it will be empty by default and
3:04
then we will have a result object which
3:06
will be containing the base 64 code of
3:09
that image the output image so we have
3:12
these three variables for this
3:14
application
3:17
so now we come to the method section uh
3:20
so here we all Define all the methods
3:23
but before that we will just have inside
3:25
your
3:26
template here we allow the user to
3:29
Simply
3:32
have a button where they can select a
3:36
image using this input tag so you'll say
3:39
you'll attach this reference which will
3:42
upload input input type will be file and
3:46
we'll only be accepting image
3:51
files so you can say that image/ star so
3:55
you only be accepting image files and
3:57
then here we can bind an onchange event
3:59
held so whenever you select any file
4:02
this custom function will execute which
4:04
is Select file so now we need to go to
4:07
the method section so right here you can
4:12
Define this function which will be
4:14
select file
4:20
function so e parameter will
4:22
automatically guess get passed and here
4:25
we can
4:26
simply attach this.p to this
4:30
and this. result data
4:34
URL to also net so we are just resetting
4:37
the values and then we get the actual
4:40
input file by e.
4:47
Target and then we extract the and here
4:51
we have this condition that if the file
4:54
is not selected or the file is invalid
4:57
in either of these cases we will return
5:00
we will not execute the rest of the
5:03
code this is just a condition right here
5:05
if the file is not selected by the user
5:09
but if now the file is there then we
5:10
need to read the file by file zero so
5:13
once we get the file we can read the
5:15
file by the file reader API we
5:19
instantiate a new Constructor and then
5:21
we call this function read as data URL
5:24
so you'll be us using this function
5:27
which is a built-in function to read the
5:30
base 64 code of that image and this will
5:33
trigger this function onload call back
5:35
function so when the image is
5:37
successfully loaded on the canvas we
5:40
will write this image on the canvas and
5:42
get this base 64
5:44
code so here you'll be changing the
5:47
content to string by this function
5:50
reader. result this will contain the
5:53
basic4 code and then we'll be changing
5:57
this value this short show model to from
6:00
false to
6:07
true and then we will simply be
6:10
resetting the value of the upload field
6:14
as well so if you have attached this
6:16
reference
6:18
variable I already attached this
6:20
reference if you see this is upload
6:22
input so we're just resetting this input
6:25
value after we get the actual input file
6:29
so if you try to refresh your
6:30
application at this time you will see
6:32
this button appearing choose file button
6:35
so when you click this and as soon as
6:39
you click it we now need to show this
6:43
uh proper component so for showing this
6:47
after this button in the
6:50
HTML we come to the HTML right here and
6:53
have a diff condition and we'll attach
6:56
this V if directive that if this value
7:01
is true then only show this so let's
7:03
attach a class here or
7:07
model so here we'll be defining the
7:10
content of this model
7:11
window and here you'll be embedding this
7:14
component which is view picture
7:18
Cropper and it actually takes some
7:23
options first of all here you can Define
7:26
the content of the model window you can
7:29
customize the look and feel by using
7:31
this object which is box
7:34
style it's an attribute here this is
7:38
actually we providing width and height
7:40
background color and margin Auto you can
7:42
customize everything and then we provide
7:45
the actual image that needs to be
7:46
displayed which is stored inside this
7:49
variable which is
7:50
pick and then again we can provide an
7:53
options
7:59
like this so we can provide The View
8:02
mode which will be
8:04
one drag mode you can even drag and drop
8:07
images as well drag mode to
8:11
crop and here then we can provide an
8:13
expect
8:15
ratio in which format you want to crop
8:18
your images so I will be cropping the
8:19
images in 16 by 9 so these three options
8:22
are
8:24
tip so apart from that it also takes a
8:28
on ready function
8:30
so when the Cropper is ready we will
8:32
Define this ready
8:34
function so now we just need to Define
8:40
this ready
8:46
function so right in the method section
8:49
you can Define
8:50
it whenever this method is ending
9:11
so you can just console log statement
9:13
that Cropper is
9:15
ready so if you now try to refresh your
9:18
application what you will see if you
9:21
select any image this will open it in
9:23
the Cropper window and now you can crop
9:26
any portion of the window and now to
9:28
show the light view as soon as you crop
9:31
any portion now to see the output so
9:34
what we need to do uh first of all we
9:36
need to add these custom CSS inside the
9:40
style section I've given all the source
9:42
code so just paste it so now it will
9:46
look something better so it will resize
9:49
itself so in the center of the screen so
9:51
now at the bottom side we need to see
9:53
the output as well so for seeing the
9:55
output
10:02
so right
10:09
here we come to the HTML in the template
10:16
section so after this we will have two
10:21
buttons so the first button will say
10:23
crop image the second button will
10:27
say cancel so the second button will be
10:30
for cancel
10:36
operation so for both these buttons will
10:39
binding an on click listener so when we
10:41
click this crop button we will need to
10:43
execute get result and then if we click
10:47
this cancel button we need to make this
10:50
Boolean parameter is show model to false
10:53
that's all now we need to Define this
10:56
function now
11:00
so this function will be
11:07
asynchronous so we just write
11:09
async the name of the function get
11:12
result and inside
11:14
this we first of all need to get the
11:16
base 64 image code of the image so you
11:21
say Cropper do get data
11:25
URL so after getting that base 64 code
11:28
now we can simply say this. data this
11:32
result data URL is equal to base
11:37
64 that's all and then we also need to
11:41
close the model window and then we
11:43
simply this show model to false so now
11:45
this will close the model window as well
11:49
so now for showing that output
11:55
image just after this div right here
12:00
we create another diff and we'll put
12:03
another if condition V if so if the
12:07
result. data URL is only available then
12:10
only execute this block of code so you
12:14
put this restriction using this V if
12:16
directive in view
12:17
Chase so now we actually show the image
12:22
live preview as
12:24
well we show the image source will be
12:27
equal to
12:30
result. data
12:32
URL that's all so this completes the
12:35
application if you try to refresh it
12:37
choose your image file and as soon as
12:41
you click the button your image will be
12:45
successfully cropped and you will see
12:46
this live previews so you can save this
12:49
as any location so in this way guys you
12:51
can use this package view picture
12:54
Cropper to make this Advanced image
12:57
Cropper also check out my website as
12:59
well free mediat tools.com uh which
13:02
contains thousands of tools regarding
13:05
audio video and image please hit that
13:07
like button subscribe the channel and I
13:09
will be seeing you guys in the next
13:11
video
#Online Media
#Other
#Other