{"id":28395,"date":"2022-04-06T02:42:52","date_gmt":"2022-04-06T02:42:52","guid":{"rendered":"http:\/\/blur-out-text-in-images-using-ocr-in-next.js."},"modified":"2025-02-21T14:27:47","modified_gmt":"2025-02-21T22:27:47","slug":"blur-out-text-in-images-using-ocr-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\/","title":{"rendered":"Blur out Text in Images Using OCR in Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>.<\/p>\n<h2>Introduction<\/h2>\n<p>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 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">Optical character recognition<\/a><a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">ptical<\/a> <a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">c<\/a><a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">haracter<\/a> <a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">r<\/a><a href=\"https:\/\/en.wikipedia.org\/wiki\/Optical_character_recognition\">ecognition<\/a> (OCR).<\/p>\n<p>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 <a href=\"https:\/\/www.semrush.com\/blog\/url-parameters\/\">URL parameters<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<ul>\n<li>Node.js v10+ installed<\/li>\n<li>A Next.js(or React) project<\/li>\n<li>A Cloudinary account \u2014 create a free account <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">h<\/a><a href=\"https:\/\/cloudinary.com\/users\/register\/free\">ere<\/a>\n<\/li>\n<\/ul>\n<h2>Live Demo<\/h2>\n<p>You can get the live demo at <a href=\"https:\/\/codesandbox.io\/s\/blur-text-on-image-8jcn72\">CodeSandbox<\/a>, and the source code is available on <a href=\"https:\/\/github.com\/achingachris\/image-text-blur\">GitHub<\/a>.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/agitated-leaf-q4v7x8?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Blur Text On Image\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>Setting Up Next.js<\/h2>\n<p>We will use the default Next.js starter to set up our project. Do this by running the following command:<\/p>\n<pre><code>npx create-next-app image-text-blur\n<\/code><\/pre>\n<h2>Get Images From Cloudinary<\/h2>\n<p>For this demo, we will use images from the Cloudinary demo accounts. These are images with text attached to them.<\/p>\n<ul>\n<li>Image 1: An image showing a car with its registration number \u2014 <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/fetch\/http:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/cd\/Austin_A110_Westminster_MkII_tail.jpg\/550px-Austin_A110_Westminster_MkII_tail.jpg\">Image URL<\/a>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_03D1277B9F8E14FBD9BE942DA72E81EC65193EB3ABE9C9B08ED09B7AC25860F6_1648310700933_550px-Austin_A110_Westminster_MkII_tail.jpg\" alt=\"Car with Registration Number Image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"550\" height=\"480\"\/><\/p>\n<ul>\n<li>Image 2: Image showing a product with branding text \u2014 <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/piano.jpg\">Image URL<\/a>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_03D1277B9F8E14FBD9BE942DA72E81EC65193EB3ABE9C9B08ED09B7AC25860F6_1648310832822_piano.jpg\" alt=\"Image with a branding text\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1920\" height=\"1280\"\/>\n<\/li>\n<\/ul>\n<h2>Blurring out Text<\/h2>\n<p>To blur out the text on Image 2, we\u2019ll use the URL parameters <code>e_pixelate_region:20,g_ocr_text<\/code>. These parameters are placed in between the upload\/ and \/image_name.jpg:<\/p>\n<pre><code>url: &quot;https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_pixelate_region:20,g_ocr_text\/piano.jpg&quot;\n<\/code><\/pre>\n<p>Explanation:<\/p>\n<ol>\n<li>\n<p><code>e_pixelate<\/code>: The parameter creates a pixel effect for the whole image, specifying the region on the image by using <code>e_pixelate_region<\/code> and adding a value, i.e., <code>e_pixelate_region:20.<\/code><\/p>\n<\/li>\n<li>\n<p><code>g_ocr_text<\/code>: The parameter is used the detect text in images, and thus adding the parameters <code>e_pixelate_region:20,g_ocr_text<\/code> will blur out the text detected in the image by pixelating the area in which the text is located on the image:<\/p>\n<\/li>\n<\/ol>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_pixelate_region:20,g_ocr_text\\\/piano.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;pixelate_region:20&quot;,&quot;gravity&quot;:&quot;ocr_text&quot;}],&quot;transformation_string&quot;:&quot;e_pixelate_region:20,g_ocr_text&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;piano.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_pixelate_region:20,g_ocr_text\/c_limit,w_2000\/f_auto\/q_auto\/piano.jpg\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1920\" height=\"1280\"\/><\/p>\n<p>We can also customize the pixels square size and make them bigger:<\/p>\n<p><code>c_fill,e_pixelate_region:30,h_80,w_200,x_170,y_260<\/code><\/p>\n<pre><code>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'\n<\/code><\/pre>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[]\"\n      parsed-url=\"{&quot;url&quot;:&quot;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&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;fetch&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;crop_mode&quot;:&quot;fill&quot;,&quot;effect&quot;:&quot;pixelate_region:30&quot;,&quot;height&quot;:&quot;80&quot;,&quot;width&quot;:&quot;200&quot;,&quot;x&quot;:&quot;170&quot;,&quot;y&quot;:&quot;260&quot;}],&quot;transformation_string&quot;:&quot;c_fill,e_pixelate_region:30,h_80,w_200,x_170,y_260&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;http:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/thumb\\\/c\\\/cd\\\/Austin_A110_Westminster_MkII_tail.jpg\\\/550px-Austin_A110_Westminster_MkII_tail.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/fetch\/c_fill,e_pixelate_region:30,h_80,w_200,x_170,y_260\/c_limit,w_2000\/f_auto\/q_auto\/http:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/cd\/Austin_A110_Westminster_MkII_tail.jpg\/550px-Austin_A110_Westminster_MkII_tail.jpg\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\" \/><\/p>\n<h2>Adding the images to Next.js<\/h2>\n<p>In the index.js file, we create an array to store the image URLs \u2014 before and after blurring the text:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> image_list = &#91;\n    {\n      <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">989<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'piano with brand text'<\/span>,\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/demo\/image\/upload\/piano.jpg'<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">990<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'piano with blurred brand text'<\/span>,\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_pixelate_region:20,g_ocr_text\/piano.jpg'<\/span>,\n    },\n  ]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the above snippet, each item in the <code>image_list<\/code> array consists of an <code>id<\/code>, <code>name<\/code>, and <code>url<\/code>(The URL with blurred text uses the explanations above).<\/p>\n<p>To display the images, we modify the <code>index.js<\/code> file to the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next\/head'<\/span>\n<span class=\"hljs-keyword\">import<\/span> Image <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next\/image'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> image_list = &#91;\n    {\n      <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">989<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'piano with brand text'<\/span>,\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/demo\/image\/upload\/piano.jpg'<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">990<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'piano with blurred brand text'<\/span>,\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_pixelate_region:20,g_ocr_text\/piano.jpg'<\/span>,\n    },\n  ]\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Image Text Blur<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span>\n          <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css'<\/span>\n          <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">'stylesheet'<\/span>\n          <span class=\"hljs-attr\">integrity<\/span>=<span class=\"hljs-string\">'sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3'<\/span>\n          <span class=\"hljs-attr\">crossOrigin<\/span>=<span class=\"hljs-string\">'anonymous'<\/span>\n        &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">link<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'container'<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'text-center m-4'<\/span>&gt;<\/span>Text Image Blur<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'container'<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'row'<\/span>&gt;<\/span>\n            {image_list.map((item) =&gt; (\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'col'<\/span>&gt;<\/span>\n                {console.log(item.url)}\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'card'<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span>\n                    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{item.url}<\/span>\n                    <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'card-img-top'<\/span>\n                    <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">'...'<\/span>\n                    <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{500}<\/span>\n                    <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{500}<\/span>\n                  \/&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'card-body'<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'card-text'<\/span>&gt;<\/span>{item.name}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            ))}\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span>\n  )\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>When we restart the server, using<\/p>\n<pre><code>npm run dev\n<\/code><\/pre>\n<p>we will now have an image with blurred text and one clear text.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_03D1277B9F8E14FBD9BE942DA72E81EC65193EB3ABE9C9B08ED09B7AC25860F6_1648599620298_Screenshot+from+2022-03-30+03-19-55.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1244\" height=\"661\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>This post discussed how to blur our text in image using OCR and on-the-fly URL transformations in Cloudinary.<\/p>\n<h2>Further reading<\/h2>\n<p>You may find the following useful.<\/p>\n<ol>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/ocr_text_detection_and_extraction_addon#blurring_or_pixelating_detected_text\">OCR Text Detection and Extraction<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_blur_pixelate_and_process_detected_text_in_your_images\">How to use OCR Text Recognition to automatically transform images<\/a>\n<\/li>\n<\/ol>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28396,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,371],"class_list":["post-28395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Blur out Text in Images Using OCR in Next.js<\/title>\n<meta name=\"description\" content=\"The post explains how to blur out text in images using Optical character recognition using on-the-fly URL transformations on Cloudinary\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blur out Text in Images Using OCR in Next.js\" \/>\n<meta property=\"og:description\" content=\"The post explains how to blur out text in images using Optical character recognition using on-the-fly URL transformations on Cloudinary\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:42:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-21T22:27:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Blur out Text in Images Using OCR in Next.js\",\"datePublished\":\"2022-04-06T02:42:52+00:00\",\"dateModified\":\"2025-02-21T22:27:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\/\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\",\"name\":\"Blur out Text in Images Using OCR in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA\",\"datePublished\":\"2022-04-06T02:42:52+00:00\",\"dateModified\":\"2025-02-21T22:27:47+00:00\",\"description\":\"The post explains how to blur out text in images using Optical character recognition using on-the-fly URL transformations on Cloudinary\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blur out Text in Images Using OCR in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Blur out Text in Images Using OCR in Next.js","description":"The post explains how to blur out text in images using Optical character recognition using on-the-fly URL transformations on Cloudinary","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js","og_locale":"en_US","og_type":"article","og_title":"Blur out Text in Images Using OCR in Next.js","og_description":"The post explains how to blur out text in images using Optical character recognition using on-the-fly URL transformations on Cloudinary","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:42:52+00:00","article_modified_time":"2025-02-21T22:27:47+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\/"},"author":{"name":"","@id":""},"headline":"Blur out Text in Images Using OCR in Next.js","datePublished":"2022-04-06T02:42:52+00:00","dateModified":"2025-02-21T22:27:47+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\/"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA","keywords":["Guest Post","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js","name":"Blur out Text in Images Using OCR in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA","datePublished":"2022-04-06T02:42:52+00:00","dateModified":"2025-02-21T22:27:47+00:00","description":"The post explains how to blur out text in images using Optical character recognition using on-the-fly URL transformations on Cloudinary","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-out-text-in-images-using-ocr-in-next-js#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Blur out Text in Images Using OCR in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924618\/Web_Assets\/blog\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a\/cd8177566595ebaaa1a7636f48457263753e8b1d-1200x628-1_283964ac6a.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28395"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28395\/revisions"}],"predecessor-version":[{"id":36914,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28395\/revisions\/36914"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28396"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}