How to Crop an Image Using Croppr.js
Let's take a look at how to use Croppr.js to crop images in your own application.
Get Started
Install the package using the command line:
And include the files in your project. You can link to them in the <head> section of your HTML document, or, if you use a bundler, include them at the top of the file you use them in. Let's assume in this tutorial that you are using a module bundler and ES6 syntax.
Create a New Croppr Instance
The Coppr package exports a Cropper object that can be instantiated to access the various methods and values, as seen in the following code snippet:
Once you have the cropper instance, you can use it to grab the cropped value from the canvas element that was passed to the cropper:
The image data object contains the x and y values of where the cropped version of the image starts and ends within the original image, plus the new width and height of the cropped version of the image.
Options
Croppr.js allows you to restrain or adjust the scope of the crop using options. One such option is a configurable aspect ratio that allows you to constrain the aspect ratio to whatever you'd like (1:1 or square crop, for example.)
To constrain the crop to a square, pass the aspectRatio option to the Croppr object upon instantiation:
Other options include a maxSize and minSize that prevent a user from cropping the image beyond a particular size. There are also onCropStart, onCropMove, and onCropEnd callback functions that allow you to process the cropped version of the image in response to changes in the cropping region.
How to Crop an Image in JavaScript Using AbstractAPI
For an easier and even more lightweight solution, use an API to handle your image cropping. An image cropping API accepts an image file, or link to a hosted image file, and some parameters dictating how the image should be cropped. The API crops the image for you based on the provided parameters, and returns either the new image file, or a link to a new image, hosted in a bucket somewhere.
Let's look at how to crop an image using the Abstract API Free Image Processing and Optimization API.
Get Started
Go to the Abstract API homepage and click on the blue "Get Started" button.
You will be asked to sign up using an email address and password. If you have signed up before, you may be asked to log in. The API is completely free and you will never be spammed with emails or requests to upgrade your tier.
The free tier allows up to 100MB of uploads per month at one request/minute. The next tier-up gives you 1GB of uploads for $9 per month.
Once you're in, you’ll find the API dashboard. There, you'll find your API key, plus links to documentation, pricing, and support.
API Requests
AbstractAPI has two endpoints for image manipulation: one that accepts an image file through multipart form upload, and one that accepts an image URL for a hosted image. In this tutorial, we'll use the URL endpoint.
The endpoint accepts an HTTP POST with an object containing the source image data and our desired cropping specifications.
AbstractAPI processes the image and sends back a JSON object containing a new URL that points to the resized image. All images are hosted in Abstract API's secure Amazon S3 buckets.
Let's crop this image:
“https://s3.amazonaws.com/static.abstractapi.com/test-images/dog.jpg”
Specify the Crop Area
AbstractAPI accepts crop parameters as part of the resize options. To specify how you want the given image cropped, make sure to set the strategy option to "crop" and indicate the width and height of the final cropped image.
You can also scale the cropped image (i.e. resize it) using a number that will be interpreted as a percentage. The crop_mode option allows you to specify which area of the original image you want to crop. By default, this will be set to center. Passing "tl" will constrain the crop to the "top left" corner of the image. Other options include "tr", "r", "l" and can also be specified as cardinal directions.
See the documentation for a full list of cropping options.
Receive the Cropped Image
AbstractAPI returns a JSON object. The object contains a URL to the new image, hosted at one of AbstractAPI's S3 buckets, plus information about the source image and the new image.
The JSON object looks like this:
Conclusion
In this article, we looked at two methods for cropping images in JavaScript: one pure vanilla JavaScript library called Cropper.js, and the Abstract API Free Image Processing and Optimization API. Both methods allow you to resize images in your application quickly and easily.
FAQs
What are the most popular JavaScript libraries for cropping images?
The two most downloaded and starred JavaScript image cropping libraries are Croppr.js and Cropper.js. Cropper.js is more actively maintained and was last released in November of 2022. Croppr.js has not been updated since 2018, although the code is still stable and many people still use it.
How can I implement image cropping in a JavaScript web application?
One of the easiest ways to implement image cropping in a JS web app is to use a dedicated image cropping API like AbstractAPI.
An image cropping API accepts an image file either through multipart form upload or via a URL that links to the image, crops the image for you based on a set of provided parameters, and returns the cropped image.
How can I ensure the quality of the cropped image in JavaScript?
To ensure that your cropped image does not suffer from a loss in quality, ensure that the service you are using does not resize or compress the cropped image before returning it to you. Additionally, you should check the aspect ratio of the original image and ensure that the cropped image retains this aspect ratio.
What are the limitations of cropping images using JavaScript?
If you are using an API to crop images using Javascript, you may be limited by the size of the uploaded image. Most APIs, particularly at the free tier level, limit uploads to a certain number of MB per request.
If you are using a library to crop images, you may find that the library only accepts certain types of file. You may also find that the functionality of some libraries is somewhat limited.
