.
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.
- Node.js v10+ installed
- A Next.js(or React) project
- A Cloudinary account — create a free account here
You can get the live demo at CodeSandbox, and the source code is available on GitHub.
We will use the default Next.js starter to set up our project. Do this by running the following command:
npx create-next-app image-text-blur
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
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:
url: "https://res.cloudinary.com/demo/image/upload/e_pixelate_region:20,g_ocr_text/piano.jpg"
Explanation:
-
e_pixelate: The parameter creates a pixel effect for the whole image, specifying the region on the image by usinge_pixelate_regionand adding a value, i.e.,e_pixelate_region:20. -
g_ocr_text: The parameter is used the detect text in images, and thus adding the parameterse_pixelate_region:20,g_ocr_textwill 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
url = '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'
In the index.js file, we create an array to store the image URLs — before and after blurring the text:
const image_list = [
{
id: 989,
name: 'piano with brand text',
url: 'https://res.cloudinary.com/demo/image/upload/piano.jpg',
},
{
id: 990,
name: 'piano with blurred brand text',
url: 'https://res.cloudinary.com/demo/image/upload/e_pixelate_region:20,g_ocr_text/piano.jpg',
},
]
Code language: JavaScript (javascript)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:
import Head from 'next/head'
import Image from 'next/image'
export default function Home() {
const image_list = [
{
id: 989,
name: 'piano with brand text',
url: 'https://res.cloudinary.com/demo/image/upload/piano.jpg',
},
{
id: 990,
name: 'piano with blurred brand text',
url: 'https://res.cloudinary.com/demo/image/upload/e_pixelate_region:20,g_ocr_text/piano.jpg',
},
]
return (
<>
<Head>
<title>Image Text Blur</title>
<link
href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'
rel='stylesheet'
integrity='sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3'
crossOrigin='anonymous'
></link>
</Head>
<main className='container'>
<h1 className='text-center m-4'>Text Image Blur</h1>
<div className='container'>
<div className='row'>
{image_list.map((item) => (
<div key={item.id} className='col'>
{console.log(item.url)}
<div className='card'>
<Image
src={item.url}
className='card-img-top'
alt='...'
width={500}
height={500}
/>
<div className='card-body'>
<p className='card-text'>{item.name}</p>
</div>
</div>
</div>
))}
</div>
</div>
</main>
</>
)
}
Code language: JavaScript (javascript)When we restart the server, using
npm run dev
we will now have an image with blurred text and one clear text.
This post discussed how to blur our text in image using OCR and on-the-fly URL transformations in Cloudinary.
You may find the following useful.
