Pixellating Images using Cloudinary and Next.js

Eugene Musebe

Introduction

This article demonstrates how to use Nextjs and Cloudinary to create an image pixelation transformation.

Cloudinary will enable us to achieve pixelation programmatically without designer apps using its own SDK tool.

Codesandbox

Check the final demo on Codesandbox.

You can also find the GitHub repository using Github.

Prerequisites

Entry-level javascript and React/Nextjs knowledge.

Cloudinary

Cloudinary refers to an end-to-end image- and video-management tool for various websites and mobile applications. It constitutes a wide range of services including online storage, image, and video manipulations, optimizations e.t.c. In this article, we explore one of Cloudinary's transformation capabilities, that is, the image pixelation feature.

For more on Cloudinary's comprehensive APIs and administration capabilities, explore the following link.

Let's begin!

Project Setup

Create a new nextjs project using npx create-next-app pixelate in your terminal. Head to the directory using cd pixelate.

We will handle all our code in the pages/index directory.

Dependencies

In order to create a cloudinary transformation, we need to import the @cloudinary/url-gen package, then pass the transformed image object to the cldImg attribute in your advancedImage component. The advancedImage component renders the image on your website.

Begin by installing the package dependencies

1npm install @cloudinary/url-gen @cloudinary/react

Import them in the pages/index component.

1"pages/index"
2
3import { Cloudinary } from "@cloudinary/url-gen";
4import { AdvancedImage } from '@cloudinary/react';

For our transformations, we will require the fill and the pixelate action. Add them to your imports like below

1"pages/index"
2
3import { Cloudinary } from "@cloudinary/url-gen";
4import { AdvancedImage } from '@cloudinary/react';
5
6import { fill } from "@cloudinary/url-gen/actions/resize";
7import { pixelate } from "@cloudinary/url-gen/actions/effect";

With our imports ready, we can begin working on the root function. Start by creating a cloudinary instance and setting your cloud name

1"pages/index"
2
3 const sample = new Cloudinary({
4 cloud: {
5 cloudName: 'demo'
6 }
7 });

Next, we include our image object. In our case, we will instantiate a Cloudinary image object using docs/models I'll create two of them:

1-` original` => Shows the original image version
2-`pixelated` => Shows the pixelated version of the original image.

At this point, we can transform our image. The pixelation effect is very simple. Select the image you want to transform. In our case pixelated. Then add the transformation using the effective method.

1"pages/index"
2
3pixelated.effect(pixelate(10))

We will also resize our images at this point. Use the following code to resize the images

1"pages/index"
2
3 original.resize(fill().width(300).height(300));
4 pixelated.resize(fill().width(300).height(300));

We are ready to render our components. Add the code below in the return statement

1<div className="container">
2 <h1>Pixellating Images using Nextjs and Cloudinary</h1>
3 <div className="row">
4 <div className="column">
5 <AdvancedImage className="image" cldImg={original} type="fetch" />
6 </div>
7 <div className="column">
8 <AdvancedImage className="image" cldImg={pixelated} type="fetch" />
9 </div>
10 </div>
11 </div>

The code above will render the components in two separated columns of a single row. The view will be as follows:

For more on the UI, css features check the GitHub repo provided at the start of the project.

That completes the project. Ensure to explore this article to enjoy the experience. Happy coding!

Eugene Musebe

Software Developer

I’m a full-stack software developer, content creator, and tech community builder based in Nairobi, Kenya. I am addicted to learning new technologies and loves working with like-minded people.