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 library3npm 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:
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 differentpixelate_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.js2import 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.