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.

Sandbox

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

Github Repository

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

Prerequisites

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.

Setting up a Next.js application

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

1npx 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:

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

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

1npm install styled-jsx

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

Uploading images to Cloudinary

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.

Building the Blur Faces Image component

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:

1//pages/index.js
2import Images from "../Components/Images";
3export default function IndexPage() {
4  return (
5    <div>
6      <Images />
7    </div>
8  );
9}

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.

Conclusion

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

Resources

Effects with face detection might also be a helpful resource.