Crop, Zoom and Download images in React using react-easy-crop

so the image dropper that i'm going to show you guys how you can make is this so this is my current profile picture and when i click on choose and suppose let me select this image well that's me of course so as you can see when i have selected a new image this zoom bar appears so the use of the zoom bar is to just zoom the image okay so let me correct this a bit and when my like when the editing is done i can just click on change and it will upload my image to the s3 packet but in our case uh there will be no change or upload button but instead there will be a download button so see the image has updated so in case uh if you all are wondering what this website is then this is a product of a bangalore based company in which i worked as a full stack developer intern for six months so i'm not gonna talk much about this today i will keep this for some future videos but yeah basically the image cropper that we're gonna make today is this oh sorry not this it's this right so yeah let's get started i have downloaded the react boilerplate code using the create react up command and you can also do the same after that i have created a folder called utils and inside of this folder i've added these two files these two files are very important because it contains some functions for example like the download function and a function to get the cropped image so you will get to know the use of these functions later on in the project so it's very important to get these two files you can find these files in the github repository that i will be linking down in the description so please get these files before you start on with the project so now let's start i'm gonna name this div as uh let's say container and inside of this container i'm gonna create two more dips the first one will be container proper and the second one will be container buttons so the container cropper div will have the cropper and the wait uh let me select an image the container cropper will have the cropper and the zoombar and the container buttons will have these two buttons right so now i'm going to install two packages one is react easy crop and the other one is material ui so the react easy crop package will help us to make the cropper and the material ui will help us to show the slider and the buttons of course the material ui part is fully optional you can use it if you want and if you do not then you are free to skip but i would suggest you use it because the slider component of material ui is very handy in this project so now i will run the project npm run start yeah the yes the project has started and yeah i have changed the default title to image cropper and zoom so now let's import the button component from material y and the first button will be the choose button and the second one will be the download button so let's check okay i'm so sorry this the naming will be a bit different it will be button so now if you see here i have two buttons but there are no background color in it so let's add some background color to the buttons so i will change the variant to contained and if i save it then yeah now this buttons have some background color in it but still it's the default color so i'm gonna change the choose button color into something different i'm gonna name it as primary and the download button as secondary so now we have two very beautiful buttons you can of course check the documentation in material ui for the button component so the second thing that now i'm gonna do is i need a input type file because i need a pop-up to select the file right so i'm gonna need an input tag over here and this input tag will accept all images so this input tag will accept all valid extensions of images not only jpg png but all valid image extensions so now let's check it once more yes it is working so now what i want is that if you like see the final project then you can see that there is no input tag over here i am triggering that pop-up using the choose button so let's achieve this similar functionality so for this i'm going to use a hook called use ref so let's name it as input ref and i'm gonna now i'm gonna assign this input ref to this input tag which will help us to create a reference of this input tag itself so now i've created a reference and now i'm gonna trigger the popup from this choose button to achieve this we're gonna need a function let's name the function as trigger popup or let's name it as trigger trigger file select popup right so the function body will have input ref dot current dot click and we are going to call this function on the button component so now if i go to our project then i should have yeah it's working fine so now we do not need this choose file component over here so i'm just gonna hide it okay it's unnecessary now but yeah you cannot delete this component because we are indirectly triggering the pop-up from this component itself so i'm gonna do display none yes now the input tag is gone now we can work on our cropper component so i'm gonna import cropper from react ez crop and also the slider from material ui and i'm going to define the cropper component inside the container proper diff and i think i should get an error yes because the cropper component needs some props but here i did not pass any props so let's pass the props that the cropper component needs but before that i have to create some states so the first state will be image and set image and its initial value will be null so the use of this state is to basically store the file that we will select using the choose button right the second state will be crop area and set prop area and its initial value will be let's say null okay the third state will be crop set crop and its initial value will be an object whose x property equals to zero and y will also be zero the fourth state will be const zoom and set zoom and its initial value will be one now i'm gonna pass image crop and zoom as props to the cropper component the fourth prop will be aspect and it requires any value which results to 1 right so you can also give 4 by 4 because the result is one when you divide four by four you can also get five by five or even two by two so it doesn't really matter i'm gonna give it as one the reason for this to be one is that we want a square cropper right so let me select a file and this is the cropper that i was talking about as you can see the size of this cropper is a square and when we give it as maybe two then the cropper will come in the form of a rectangle which you don't want so we will give it as one and it will have some more additional props i mean the cropper component will have some more additional props so the fifth prop will be on crop change and it will get the set crop function the sixth prop will be on zoom change and it will get the set zoom function and the final prop will be on crop complete and i will pass a function let's say on crop complete so i have not yet created a function by the name of on crop complete so let's first create that i'm not going to write the body of the function right now because we have one another function which is more important at this stage i'm going to name it as const on select file and this function will be called on the input tag so here i am basically saying that whenever we select a file we want the on select file to run so this function will receive an event so let's console.log the event so i'm gonna select a file and yes this is the event that we receive so the property or you can say the value that we're interested in is inside of the target object and it is called files so the file that we just selected is inside of the files object so this is the name of the file the size the type so now i'm going to write an if statement which will basically check if we have selected a file or not and if we have selected a file then it will run the code which will be inside of the if statement so now i'm going to create an object out of the new file reader constructor and the use of this constructor is to basically read files asynchronously and also i'm going to read the file as a data url if you see here then you can see that the file is in the form of an object right but we need the file to be in the form of a data url and in order to do that we use the function or you can say the method that you get on our reader object so it will be event dot target dot files zero and we are also going to add an even listener which will listen for the load event and it basically says that when the file is finished reading then we run a callback and inside of this callback i'm gonna write a set image equal to the value or you can see the data url that we get so here i am assigning the data url that we get after reading the file to the image date so let's console the log the data url so that you get an idea so this is the data url that i was talking about and its size is 591 kb one thing that you should remember is that the size of the data url is always greater than the file that you selected so in this case if i like check the size of this file and it will be around 433 kb right and our data url size is 591 kb the reason for this is whenever we read a file as a data url it's in its encoded in a base64 format so this additional you can say encoding makes the file size larger than its original size right so [Music] yeah it is done and i think now yes we are getting our image and also the cropper with it right but we still did not write the body of the on crop complete function so let's do that this on crop complete function will receive two parameters the first one will be cropped area percentage and the second one will be cropped area pixels and here i'm gonna write set cropped area and we can choose either of these two parameters i'm going to choose cropped area pixels so whenever we finished cropping our image it will set the cropped size to the cropped area state right so let's console log the these two parameters so yeah so this is the size of the cropper or you can say the position of the cropper the first one is in the form of a percentage and the second one is in the form of pixels so we are interested in the pixel one because here i am using the pixels not the percentage so when we like crop and release the mouse this console.log gets triggered so we are basically running this function after we finished cropping right so our cropper is basically done now we are only left with applying some css to our project and also writing the download function but first let's write some css because this looks very ugly right actually i have noticed a bug or the slider should appear only when there is any image selected right like here as you can see the slider is visible because the image is there but here we don't have any image but still the slider is visible so in order to fix this i just have to wrap these two components inside of a condition and the condition will be if there is any image selected then we want these two components to appear or else we just want null right so this should fix this yes and it has fixed it so now it's time to apply some css i'm seeing some default padding and margin so in order to remove this i just have to go to my index.css file and write few lines of css margin will be 0 padding will also be zero and yeah it has removed the default padding and margin so now i want these two buttons to appear at the bottom and our dropper to be at the top of those buttons so let's check how it is looking now okay so the cropper is taking the full page right so we have to fix this i'm gonna wrap my cropper component inside of a diff whose class name will be proper and also the slider component whose class name will be slider so now we have two divs inside of the container class right so the css file will be app.css and inside of this i will give some height to the container class i'm going to give a height of 100 bh and a width of 100 vw or view width so [Music] yeah the container cropper will have a height of 90 percent and the container buttons class will have a height of 10 yes the buttons are now at the bottom of the page i also want a margin to appear at the top of the buttons container so i will write border 1px solid f5 f5 f5 so this will give me a margin a very thin light margin over the buttons container right and now i want these buttons to be at the center of the container to do that i will just write display flex align item center justify content center so now the buttons are at the center of this container i also want some gap between these two buttons so in order to do that i can just apply some css to the button component itself so style will be margin left now margin right of let's say 10 pixels so yes we have some gap now so now let's go to our container cropper and apply some css there so so now i'm going to give a height of 90 to the proper class and a height of 10 to the slider class so this is basically saying 90 of the height of the container copper class and 10 percent of the height of the container cropper class so please do not get confused between all these heights right so now let's check how our cropper looks okay it is still taking the full height and width of our page so let's debug the problem okay so i'm seeing a position absolute over here right so i'm assuming i have to give a position relative to the cropper class so let's do that position of relative and yes it has fixed the problem but it is still occupying the full width i am gonna give a padding to the container cropper so this way it will apply some padding to both the slider and cropper class padding of 10 pixels so yes it looks much better now i'm also going to center the slider so this slider is occupying this whole height i mean the remaining height so i'm going to center it by just doing uh display flaps and line item center and justify content center so now it is at the center of the container the width is just too much okay i'm also seeing a bug the slider is not working but let's skip that for later and give some width i mean decrease the width of the slider so i'm going to give it as let's say 60 percent okay it will not be justified content it will be margin auto yes the slider is now at the center of the container so now the slider is not working as you can see so i think i haven't yes i haven't passed any props to the slider component i just forgot it so badly i'm so sorry guys so the first prop will be one mean equal to one second will be max equal to let's say three i mean the slider has a mean value of one and the maximum it can go is three so this mean value has to be equal your resume value right so the max is three so basically we can zoom our image three times not more than that of course you can change this number if you want more zoom but i recommend you keep it at three because if you will have more zoom then the image might pixel it step will be 0.1 value will be zoom on change will be it will receive two parameters and i think now the slider should work yes the slider is working so in case you were wondering what is the step so the step is like whenever dragging the slider as you can see it just moves right i mean it it directly switches the position it's not that smooth so this is just that so we are moving the slider by point one every time we like drag our slider so our project is basically done now it's time to write the download function so basically when we click on download i want this area inside the cropper to be downloaded in the form of an image right so let's write our download function i am going to name the function as let's say on download and this function will be called on the download button so guys if you remember i told you about these two files at the starting of the video so now is the time where we will utilize these two files so if i open the first file which is crop image this file has a function called generate download so i will use this function to download our picture or you can say the edited photo so now i'm gonna import that function import generate download from utils crop image and then i will call the function here so this function accepts two parameters one is image src and the second one is crop so image src is basically the image right and the crop is the cropped area so here i will pass the image as the first parameter and the second parameter will be cropped area now our download function should work so if i click on download yes i am getting the popup from where i can save my image so the default name is image.jpg so let me save the file and yes i have successfully downloaded the cropped image so guys our project is done and there are some small things that i have to say to you all guys if you want the default name to be something else so in my case it is image so if you want this to be something else then you can just go to the crop image file and change this name over here in the general download function so as i have written here as image.jpg i'm getting my default name as image.jpg so you can change it to your liking you can give any name and the default name will be that and also one more important thing is that the dot to block is a method on the canvas object right and it accepts three parameters the first one is the callback function second one is the type of the image i mean the file extension of the image so in my case i have given as jpg you can put it as png or any valid image file extension and the third parameter is the quality of the file so here it is 0.66 which basically means 66 percent so the third parameter can have a value between 0 and 1. so when you give it as 1 the quality will be 100 and the size of the image will increase drastically right so now i have a size of 89 kb but if you give it as let's say 1 the size will increase so let's check it out all right open download so now as you can see when i give the value as one the size just increased so drastically like it's now 851 kb and here it is just 89 kb so you can see the difference in the size right so i would recommend you keep it in 0.66 because this is the number where the quality is you can say almost same but the size just reduces drastically so let me check once more yes it is it has reduced again right so i would recommend you keep this value as 0.66 okay so guys this is it we have reached the end of this video and since this is my very first video on youtube it may not be perfect but if you all have gained some knowledge regarding how to make an image proper using react easy crop please make sure to like this video and also subscribe my channel because in the near future i will be uploading more videos related to full stack web development and yeah this is it see you on my next video bye bye take care stay safe

Channel: FrontendInterviewPro

Views: 17,370

Keywords: image cropper in react, react-easy-crop, how to crop images in react, image cropper using react-easy-crop, react easy crop, react image crop, image cropper, crop images in react, crop image in react, file upload react, crop zoom download images in react, how to make an image cropper in react

Id: RmiP1AY5HFM

Length: 30min 13sec (1813 seconds)

Published: Fri Dec 04 2020