How to Crop Images to a Face in Node.js

Leverage facial recognition artificial intelligence to automatically crop images into a square or circle shape.

Creating uniform headshots for display on a public web page - or even for something like an ID card - can be a bit of a challenge. It’s hard to lock down a single aspect ratio that works across multiple unique photographs, and it’s even more of a challenge to marry that aspect ratio with a certain framing standard when the original photos are taken.

We want to avoid manually cropping images, if at all possible, since that takes up a lot of time - and accomplishing that requires an intelligent automated solution.

Thankfully, facial cropping is a great use-case for image recognition artificial intelligence. Advanced facial feature recognition technologies make it possible to automatically define the boundaries of a face in an image by determining facial landmarks such as noses, eyes, and mouths, and then crop around those features to isolate the face in a close-up version of the image.

Tutorial: Crop Images to a Face in a Square or Circle Shape

In this tutorial, we’ll learn how to call a pair of APIs that use facial recognition AI to crop images to either a square or round crop of a face. Before we get going in our tutorial, we’ll first look at some examples of how these APIs crop images to make sure the output matches our needs.

Example Square and Circle Crop Outputs

We’ll start with a generic stock photo headshot image. This image emulates the style of profile picture we might expect to find on professional social networking sites.

Editing this image with the “square crop” API returns the following result:

And editing the original image with the “circle crop” API returns the following result:

Keep in mind the retention of image quality post-zoom is dependent on the quality of camera used to capture the original photo. Images with less pixel information won’t handle magnification quite as well.

Let’s move on to our tutorial!

Step 1: Install the Cloudmersive API Client

We’ll begin by running the following NPM command to install the Cloudmersive Image API client:

npm install cloudmersive-image-api-client --save

Alternatively, we can add this snippet to our package.json:

  "dependencies": {
    "cloudmersive-image-api-client": "^1.3.4"
  }

Step 2: Configuration

Next, we’ll add the following configuration snippet to our file:

var CloudmersiveImageApiClient = require('cloudmersive-image-api-client');
var defaultClient = CloudmersiveImageApiClient.ApiClient.instance;

// Configure API key authorization: Apikey
var Apikey = defaultClient.authentications['Apikey'];
Apikey.apiKey = 'YOUR API KEY';

Within this snippet, we’ll provide an API key to authorize our requests. We can get an API key for free by creating a free account on the Cloudmersive website; this allows a limit of 800 API calls per month with zero additional commitments. We can always scale up our plan if/when the need arises.

Step 3: Instance Each API

In our final step, we’ll create an instance of the API we want to use (or both) and call each respective function.

To create a “square crop”, we’ll use the following code:

var apiInstance = new CloudmersiveImageApiClient.FaceApi();

var imageFile = Buffer.from(fs.readFileSync("C:\\temp\\inputfile").buffer); // File | Image file to perform the operation on.  Common file formats such as PNG, JPEG are supported.


var callback = function(error, data, response) {
  if (error) {
    console.error(error);
  } else {
    console.log('API called successfully. Returned data: ' + data);
  }
};
apiInstance.faceCropFirst(imageFile, callback);

And to create a “circle crop”, we’ll use the below code instead:

var apiInstance = new CloudmersiveImageApiClient.FaceApi();

var imageFile = Buffer.from(fs.readFileSync("C:\\temp\\inputfile").buffer); // File | Image file to perform the operation on.  Common file formats such as PNG, JPEG are supported.


var callback = function(error, data, response) {
  if (error) {
    console.error(error);
  } else {
    console.log('API called successfully. Returned data: ' + data);
  }
};
apiInstance.faceCropFirstRound(imageFile, callback);

We’ll always get our image response in PNG format (for lossless compression); if we started our operation with a JPEG image, we could simply convert the output back JPEG format from there.

And that’s all there is to it! Now we can improve our image processing automation with a pair of intelligent facial recognition APIs.