Hi, In this blog post, we will create an image cropper web project using cropper.js, a very popular javascript library. This is a full website, you can use to earn money as well by hosting this project. Get the source code below at the end of the post.

Add Library to Project

Cropperjs has one CSS and one javascript file. Files are given with source code or use CDN for cropperjs. Add the files in the project and also create and add new files for custom CSS and javascript.

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.

Cropper Options

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.

Cropper Controls

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.

Rotate Image

Use the rotate function and provide the angle on which you want to rotate image with single click. Default value is 45.

Flip Image

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.

Image Movement

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.

Aspect Ratio

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.

Final Thoughts

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.