Blur out Text in Images Using OCR in Next.js

Chris Achinga

Blur out Text in Images Using OCR in Next.js.

Introduction

Some of the images we use on our websites contain text that we do not need to display. So, we can either crop the text part out, cover the text with colors, or edit the image to blur out the text. Cloudinary is a service that provides built-in blur_region/pixelate_region that enables Optical character recognitionptical character recognition (OCR).

Cloudinary offers several options to blur out text in images using OCR, including its built-in OCR features. This article demonstrates how to blur out text on images using URL parameters.

Prerequisites

  • Node.js v10+ installed
  • A Next.js(or React) project
  • A Cloudinary account — create a free account here

Live Demo

You can get the live demo at CodeSandbox, and the source code is available on GitHub.

Setting Up Next.js

We will use the default Next.js starter to set up our project. Do this by running the following command:

1npx create-next-app image-text-blur

Get Images From Cloudinary

For this demo, we will use images from the Cloudinary demo accounts. These are images with text attached to them.

  • Image 1: An image showing a car with its registration number — Image URL

  • Image 2: Image showing a product with branding text — Image URL

Blurring out Text

To blur out the text on Image 2, we’ll use the URL parameters e_pixelate_region:20,g_ocr_text. These parameters are placed in between the upload/ and /image_name.jpg:

1url: "https://res.cloudinary.com/demo/image/upload/e_pixelate_region:20,g_ocr_text/piano.jpg"

Explanation:

  1. e_pixelate: The parameter creates a pixel effect for the whole image, specifying the region on the image by using e_pixelate_region and adding a value, i.e., e_pixelate_region:20.

  2. g_ocr_text: The parameter is used the detect text in images, and thus adding the parameters e_pixelate_region:20,g_ocr_text will blur out the text detected in the image by pixelating the area in which the text is located on the image:

We can also customize the pixels square size and make them bigger:

c_fill,e_pixelate_region:30,h_80,w_200,x_170,y_260

1url = 'https://res.cloudinary.com/demo/image/fetch/c_fill,e_pixelate_region:30,h_80,w_200,x_170,y_260/http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg'

Adding the images to Next.js

In the index.js file, we create an array to store the image URLs — before and after blurring the text:

1const image_list = [
2 {
3 id: 989,
4 name: 'piano with brand text',
5 url: 'https://res.cloudinary.com/demo/image/upload/piano.jpg',
6 },
7 {
8 id: 990,
9 name: 'piano with blurred brand text',
10 url: 'https://res.cloudinary.com/demo/image/upload/e_pixelate_region:20,g_ocr_text/piano.jpg',
11 },
12 ]

In the above snippet, each item in the image_list array consists of an id, name, and url(The URL with blurred text uses the explanations above).

To display the images, we modify the index.js file to the following:

1import Head from 'next/head'
2import Image from 'next/image'
3
4export default function Home() {
5 const image_list = [
6 {
7 id: 989,
8 name: 'piano with brand text',
9 url: 'https://res.cloudinary.com/demo/image/upload/piano.jpg',
10 },
11 {
12 id: 990,
13 name: 'piano with blurred brand text',
14 url: 'https://res.cloudinary.com/demo/image/upload/e_pixelate_region:20,g_ocr_text/piano.jpg',
15 },
16 ]
17 return (
18 <>
19 <Head>
20 <title>Image Text Blur</title>
21 <link
22 href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'
23 rel='stylesheet'
24 integrity='sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3'
25 crossOrigin='anonymous'
26 ></link>
27 </Head>
28 <main className='container'>
29 <h1 className='text-center m-4'>Text Image Blur</h1>
30 <div className='container'>
31 <div className='row'>
32 {image_list.map((item) => (
33 <div key={item.id} className='col'>
34 {console.log(item.url)}
35 <div className='card'>
36 <Image
37 src={item.url}
38 className='card-img-top'
39 alt='...'
40 width={500}
41 height={500}
42 />
43 <div className='card-body'>
44 <p className='card-text'>{item.name}</p>
45 </div>
46 </div>
47 </div>
48 ))}
49 </div>
50 </div>
51 </main>
52 </>
53 )
54}

When we restart the server, using

1npm run dev

we will now have an image with blurred text and one clear text.

Conclusion

This post discussed how to blur our text in image using OCR and on-the-fly URL transformations in Cloudinary.

Further reading

You may find the following useful.

  1. OCR Text Detection and Extraction
  2. How to use OCR Text Recognition to automatically transform images

Chris Achinga

Technical Writer