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.
The completed project is on CodeSandbox. Fork it and run the code.
The source code is also available on GitHub.
The following are requirements to complete this project:
- Knowledge of React, Remix
- Node.js and its package manager, npm. We run the command
npm -vto verify we have them installed or install them from here
- A Cloudinary account (sign up here)
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.
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.
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.
From the gist above, we:
CloudinaryContextand added our cloud name
publicIdof the images we uploaded to cloudinary to the
Imagetag to display them
Transformationto add different
pixelate_faceseffects 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,
The second image has a lighter blur effect,
The third one has a very thick blur effect,
This article taught us how to censor or blur images with Remix and Cloudinary.