Blur Faces in Images in Next.js

Blurring images helps hide anything we don’t want people to see, such as backgrounds, faces, house numbers, or anything we want to obscure from photos.

This post discusses how to blur faces in an image using Cloudinary and Next.js.

Cloudinary offers an end-to-end solution for all our image and video needs, including upload, storage, administration, transformation, and optimized delivery.

Next.js is a React-based framework for building modern web applications. It has impressive features such as server-side rendering, incremental static regeneration, and more. These features make it very easy to build scalable, production-ready applications.

We completed this project in CodeSandbox. Fork and run it to quickly get started.

https://github.com/Kizmelvin/blur-faces-with-nextjs

The following are requirements to complete this project:

• A fair knowledge of Javascript and React.js.
• A Cloudinary account. Sign up — it’s free!
• Knowledge of Next.js is useful but not required.

First, we’ll bootstrap a Next.js application with the following command in the terminal:

npx create-next-app blurred-faces

The command above creates a Next.js application in a folder called “blurred-faces.”

Next, we’ll navigate into the project directory, install the cloudinary-react package, and start the application with the following commands:

cd blurred-faces #navigates to project directory.
npm install cloudinary-react #installs the cloudinary-react library
npm run dev #start the application.

We’ll also install styled-jsx with the command below to handle the project styling:

npm install styled-jsx

Next.js will start a development environment accessible by default at http://localhost:3000.

Now, let’s log in to Cloudinary and navigate to “Media Library.” Download and the following unsplash images and upload them to this Cloudinary directory:

• https://unsplash.com/photos/kRWY72TKB0Y

• https://unsplash.com/photos/Q_Sei-TqSlc

• https://unsplash.com/photos/fznQW-kn5VU

Note the image public IDs or write them down somewhere; we’ll use them later to access our images.

Let’s create a Components folder in the root directory and create a file Images.js inside it using the following snippet:

https://gist.github.com/Kizmelvin/3f42172f218f1f80ee63c7bca11f0f89

In the snippet above, we:

• Imported CloudinaryContext and added our cloud name.
• Passed “publicIds” of the images we uploaded to cloudinary to the Image tag to display them.
• Used Transformation to add different pixelate_faces effects to the pictures to blur the faces.

Next, we’ll import the Image.js component and render it inside the index.js file:

//pages/index.js
import Images from "../Components/Images";
export default function IndexPage() {
  return (
    <div>
      <Images />
    </div>
  );
}

Now, we should see our images with different face blur effects in the browser.

The first image has the default blur effect, pixelate_faces.

The second image has a lighter blur effect, pixelate_faces:10.

The third one has a very thick blur effect, pixelate_faces:40.

This post discussed blurring faces in images using Cloudinary and Next.js.

Effects with face detection might also be a helpful resource.