Add Library to Project
For Upload Image
Process starts with uploading image to workspace. To maintain our website design, we hide the default file selector button and create a new custom button for selecting a file. On line 2, when user clicks on the custom button, hidden file selector button is automatically clicked and a windows popup will open for selecting a file. And if image is selected, onchange function will execute. This function will take the selected image and render the whole cropper for working. So write the cropper class, options and control functions in that onchange function.
Show Image on Workspace
After the image is uploaded, we need to show the image in workspace for the next process. On line 7, we are clearing workspace by adding a new image tag. It shows its importance when we upload the second image. Now, get file from selector button and convert it to a blob. Provide the blob to img tag as a src and image will be displayed on the workspace.
Provide the cropper options you want to use in your cropper app. Make sure to provide the class of the element, where you want to show the preview of the cropper in a "preview" property. Get more options from GitHub or try these options in a cropper playground. All the controls should be in the ready function of the options object. So, when the cropper is completely rendered in HTML, you are allowed to use it.
Now, we will add controls to our cropper app. You can use as many controls from the available options in your cropper app. But, here, we will use some simple controls. We will use "cropper" variable that is initialized with the Cropper() class provided by the cropperjs library.
Zoom for Image
Use the zoom function to add zooming control in your app. Provide 0.1 as parameter to the zoom function. when the function executes, image will be zoomed using parameter value. With positive value, image will be zoomed in and with negative value, image will be zoomed out.
Use the rotate function and provide the angle on which you want to rotate image with single click. Default value is 45.
Flipping of image is tricky. For that, scale function will be used with two parameters, one for x-axis and other one y-axis. Initialize a variable with -1 value. If you want to flip on the x-axis, then provide that variable to x-axis, and y-axis must be 1. And if, you want to flip on y-axis, then provide that variable to y-axis and x-axis must be 1. After flipping, invert the variable for further use in the opposite direction.
For image movement, use move function with two parameters, one for x-axis and other one for y-axis. -1 on x-axis move image to left, 1 on x-axis goes to right, -1 on y-axis goes to top and 1 on y-axis goes to bottom. Other axes, must be 0.
Use setAspectRatio function to set the aspect ratio of cropper and pass the parameter as number. Use 16:9 as 16/9 and proved the result of division as 1.777777. Use any ratio and provide division result as parameter to setAspectRatio function. Use 0 as parameter to set the cropper aspect ratio to free.
Some other controls are also given below, you can also use that. You can destroy the cropper, lock or unlock the cropper and set the drag mode of the workspace. This cropper can also be controlled using a mouse and keyboard. Get more docs about cropper to get more help.
Get Cropped Image
Within the ready function, use getCroppedCanvas function to get the cropped image data. This data is in the form of an HTML canvas. You can convert it to blob yourself or use built-in toBlob function within the cropperjs library and get the response in the form of blob. Convert the blob into URL and download it as image in any type.
Initialize Cropper Class
Now, we have set the image workspace and options. We also have ready function within options and also have controls that will work on executing ready function. Provide image_workspace and options as parameters to Cropper class and initialized with "cropper" variable which we use everywhere with functions. It will be used outside the options but inside onchange function.
Cropperjs is one of the best libraries for making a cropping website with a lot of options and control functions with easy documentation. You can learn a lot from this project and publish it to add to your portfolio.