Some of the main cropper image manipulation features: You can check the demo And you can easily access the component via ref. This allows you to use the already implemented React component, which is using the famous jQuery cropper plugin. Our application is using a very trending JavaScript framework React with a predictable state container library Redux and ImmutableJS for managing the state of your app.įor image cropping I have used React-cropper.

This is solved with a used crop library, where you can set the aspect ratio any way you want. You usually need to choose between a fixed aspect ratio of the crop area (ideal for avatar images) and free form selection box (backgrounds, content images). For the sake of simplifying this tutorial, you are not going to deal with it in this section.Īnother typical configuration option is how you allow the crop region to be defined. Or maybe you could upscale the image on the server. You could set some minimum specifications on the image directly in the client. If the image is too small, there are many ways to deal with this problem.

If the image is too large, it’s going to be downscaled to the defined maximum sizes. What if the image is too large or too small to start with? You need to put a barrier for newbie users that could try to upload very large files (> 2MB) directly from the camera, as processing such an image and displaying it would probably require a lot of effort from the browser. The server processes the image based on the parameters received and returns a link to the final image.īut there are a few problems you need to solve. After the user is done with it, the crop parameters will be sent to the server. First you need to upload the image to the server and then the user can select his region of interest in the image. The idea is that you need a simple mechanism which allows the user to submit his or her image and resize/crop it on the server. I am also using JSX syntax which allows you to write a more readable code for React components. This is why I decided to write this article: to give you a simple cookbook and save a lot of your time searching for information on Google or Stack Overflow.Īll client-side code in this article is written in ECMAScript 2015 mostly known as ES6, which gives you features like arrow functions, object/array destructuring, etc. During my development experience on a specific project, I was unable to find any good tutorials or guides on how to make a simple and effective image uploading when your application is running on React & Redux with a NodeJS-based server, which in our case was powered by AWS.

Javascript client side image resize