Introduction

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

Remix is a full-stack React framework for building web applications. It provides several helpful features such as server-side rendering, file-system-based routing, TypeScript support, built-in support for cookies and sessions, and more.

What We Will be Building

This article will discuss how to censor images using Cloudinary and Remix.

Sandbox

The completed project is on CodeSandbox. Fork it and run the code.

The source code is also available on GitHub.

Prerequisites

The following are requirements to complete this project:

• Knowledge of React, Remix
• Node.js and its package manager, npm. We run the command node -v && npm -v to verify we have them installed or install them from here
• A Cloudinary account (sign up here)

Getting Started

First, we need to run the command below in the terminal to set up a new Remix application.

1npx create-remix@latest censor-images

The command above triggers a command-line interface (CLI) where we can configure the application. The images below show the configuration options the CLI provides:

Next, navigate into the project directory.

1cd remix-censor-images

Then, run the command below to start the application.

1npm run dev

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

Installing Cloudinary

Cloudinary provides a robust solution to store, transform, optimize and deliver images and videos in software applications.

We’ll install the cloudinary-react package that exposes various media delivery and transformation functions using the command line.

1npm i cloudinary-react lodash

Lodash is a dependency of the Cloudinary package.

Setting up Cloudinary

In our dashboard, we will have access to upload and save the downloaded images in Cloudinary by clicking the Media Library tab and Upload button, as displayed below.

Next, we need to copy the publicId for the saved images from our dashboard, we'll use them later to access our images.

Building the Censor Image Application

Navigate to the app/routes/index.jsx file and update it with the code from the gist below.

https://gist.github.com/Tundesamson26/c573bdec4c2a2590b014cb56a2eec6ca

From the gist above, we:

• Imported CloudinaryContext and added our cloud name
• Passed publicId 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 images

Now, we should see our images with different 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:45.

Conclusion

This article taught us how to censor or blur images with Remix and Cloudinary.

Resources

• Remix Documentation
• Effects with face detection
• Cloudinary Image Transformation