{"id":27876,"date":"2022-07-08T07:41:52","date_gmt":"2022-07-08T07:41:52","guid":{"rendered":"http:\/\/handle-quick-ai-text-detection-in-images-in-nuxt.js"},"modified":"2022-07-08T07:41:52","modified_gmt":"2022-07-08T07:41:52","slug":"handle-quick-ai-text-detection-in-images-in-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/","title":{"rendered":"Handle Quick AI Text Detection in Image in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>AI has so transformed and automated a lot of activities that with OCR (Optical Character Recognition), we can now get all texts from images without having to type them out as we have been doing manually.<\/p>\n<p>NuxtJS is a Vue.js based, open-source JavaScript library that improves building server-rendered Vue.js applications, leading to more performant web applications.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/signup\">Cloudinary<\/a> is a cloud-based video and image management platform that offers services for managing and transforming uploaded assets for usage on the web. The OCR add-on for text detection and extraction is also a part of the solutions rendered by Cloudinary.\nIn this article, we will be explaining how to detect and extract texts from images in NuxtJS using the OCR add-on from Cloudinary.<\/p>\n<h2>Sandbox<\/h2>\n<p>We can find the completed project on <a href=\"https:\/\/codesandbox.io\/s\/implement-quick-ai-text-detection-in-images-in-nuxtjs-yhrmfs\">CodeSandbox<\/a>. Fork it and run the code.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/implement-quick-ai-text-detection-in-images-in-nuxtjs-yhrmfs?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=\"Implement quick AI text detection in images in NuxtJs\"\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  <div class=\"wp-block-cloudinary-markdown \"><h2>Github<\/h2>\n<p>Check out the complete source code <a href=\"https:\/\/github.com\/MoeRayo\/ai-text-detection-in-images\">here<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Understanding this article requires the following:<\/p>\n<ul>\n<li>Installation of Node.js<\/li>\n<li>Basic knowledge of JavaScript<\/li>\n<li>Familiarity with NuxtJS<\/li>\n<li>A Cloudinary account (sign up for a free account <a href=\"https:\/\/cloudinary.com\/signup\">here<\/a>)<\/li>\n<\/ul>\n<h2>Creating a NuxtJS Project<\/h2>\n<p>Use <code>npx create-nuxt-app &lt;project-name&gt;<\/code> to create a new NuxtJS project.\nThe process of scaffolding the project would provide a list of options, which should look like this:\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657115129\/e-622f762c6cb5ad0068bc82c6\/j2ofeown7igk1caacsi8.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"746\" height=\"230\"\/><\/p>\n<p>After successful project creation, we\u2019ll navigate into our directory and start our application by running the following command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project<\/span> <span class=\"hljs-attr\">name<\/span>&gt;<\/span>\nnpm run dev\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>NuxtJS<\/p>\n<p>will, in turn, start a hot-reloading development environment that is accessible by default at <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n<h2>Registering Cloudinary\u2019s OCR Text Detection and Extraction Add-on<\/h2>\n<p>Our project requires the <a href=\"https:\/\/cloudinary.com\/documentation\/ocr_text_detection_and_extraction_addon\">OCR text detection and extraction<\/a> add-on from Cloudinary. To use the add-on in code, we must register for it via the Cloudinary dashboard. We will log into our Cloudinary dashboard and choose the <strong>Add-ons<\/strong> tabs from the available options on the navigation bar.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657115247\/e-622f762c6cb5ad0068bc82c6\/jw2krvmeunqglcqgr6qj.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"824\" height=\"65\"\/><\/p>\n<p>Clicking on the tab above shows all the available add-ons on Cloudinary, from which we will choose the OCR text detection and extraction add-on:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657115336\/e-622f762c6cb5ad0068bc82c6\/sqqkv6st6c14ataebwj9.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"236\" height=\"365\"\/><\/p>\n<p>Choosing the add-on prompts us to view a well-detailed tab about the add-on. For this demo, we will pick the free plan:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657115407\/e-622f762c6cb5ad0068bc82c6\/lsm8zku3qmhbxaxuewt7.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"844\" height=\"454\"\/><\/p>\n<h2>Allow Unsigned Add-on Transformations on Cloudinary<\/h2>\n<p>To allow people to transform images on the fly without verification using Cloudinary\u2019s authenticated API, we will navigate to the <strong>Settings<\/strong> and click on the security option. This will show a bunch of options for us to activate or deactivate. In our case, we will look out for the <strong>Unsigned add-on transformations allowed<\/strong> options and check like so:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657115486\/e-622f762c6cb5ad0068bc82c6\/pkbxngdrpbrn0covk8ha.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"842\" height=\"132\"\/><\/p>\n<h3>Adding an upload preset<\/h3>\n<p>We will need to link the unsigned add-on to an upload preset, enabling us to upload and transform our assets on Cloudinary. To do this, we will pick the <strong>upload<\/strong> option from the settings tab and look for the upload presets. From the upload preset, we can either decide to choose an existing preset and modify or create a new unsigned preset like so:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657115607\/e-622f762c6cb5ad0068bc82c6\/b1dmr5dolit0ztrek6hb.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"919\" height=\"119\"\/><\/p>\n<p>The above will create a new unsigned preset that we can modify. Clicking on the newly created preset will take us to an inner page. Here, we can see the OCR in the <strong>Media analysis and AI<\/strong> tab.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657115750\/e-622f762c6cb5ad0068bc82c6\/uesaiepmk0gkbv3zc16h.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"870\" height=\"212\"\/><\/p>\n<p>We are ready to begin working on our application with all these fully set.<\/p>\n<h2>Creating the UI<\/h2>\n<p>We will be adding an input UI that allows the user to upload an image from which we can extract texts. To do this, we will add the block of code below in the <code>pages\/index.vue<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex flex-column flex-row-ns pa3 calisto bg-black-05 vh-100\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">enctype<\/span>=<span class=\"hljs-string\">\"multipart\/form-data\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"w-50-ns w-100 ph3\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Upload Image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"b--dashed bw1 b--light-purple pa3 hover-bg-black-10 bg-animate pointer relative h4\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">accept<\/span>=<span class=\"hljs-string\">\"image\/*\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"input-file absolute w-100 h4 pointer o-0\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tc f4\"<\/span>&gt;<\/span>\n          Drag your file here to begin<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span>&gt;<\/span> or click to browse\n        <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\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-light-blue pa3 mv4 link dim br2 pointer ba b--light-blue dib\"<\/span>&gt;<\/span>Extract Text<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"w-40-l w-50-m w-100 ph3\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Extracted Text<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-light-blue br3 h-auto pa3 f4 lh-copy\"<\/span>&gt;<\/span>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia autem veritatis facere commodi, id repellat accusantium. Aliquam animi quaerat ullam vero ad. Nam, laudantium at. Vitae maiores beatae nostrum! Corporis delectus inventore dolor, necessitatibus, ipsa voluptate aspernatur ipsum officia earum, at reiciendis atque beatae illum libero eligendi eius vel! Ex.\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-black pa3 mv4 link dim br2 pointer ba b--black dib white\"<\/span>&gt;<\/span>Copy to clipboard<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/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\">template<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We achieved the following from the above:<\/p>\n<ul>\n<li>Added a <code>&lt;form&gt;<\/code> tag with the <code>enctype=&quot;multipart\/form-data&quot;<\/code> attribute to enable file upload.<\/li>\n<li>Added <code>input<\/code> with a <code>file<\/code> type attribute to accept file upload and with the <code>accept=&quot;image\/*&quot;<\/code> attribute, we restricted the input to only taking images<\/li>\n<li>Created a section with placeholders showing where the extracted text from images should appear<\/li>\n<\/ul>\n<p>At this point, our UI should look like the image below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657115896\/e-622f762c6cb5ad0068bc82c6\/mylwubq4addjfiluwgrf.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1393\" height=\"326\"\/><\/p>\n<h2>Uploading Image<\/h2>\n<h3>Fake upload service<\/h3>\n<p>To handle the file upload to be displayed in the UI, we will create a <code>utils\/file-upload.service.js<\/code> and add the code block below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">upload<\/span>(<span class=\"hljs-params\">formData<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> photos = formData.getAll(<span class=\"hljs-string\">'photos'<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> promises = photos.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">x<\/span>) =&gt;<\/span> getImage(x)\n  .then(<span class=\"hljs-function\"><span class=\"hljs-params\">img<\/span> =&gt;<\/span> ({\n    <span class=\"hljs-attr\">id<\/span>: img,\n    <span class=\"hljs-attr\">originalName<\/span>: x.name,\n    <span class=\"hljs-attr\">fileName<\/span>: x.name,\n    <span class=\"hljs-attr\">url<\/span>: img\n  })));\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-built_in\">Promise<\/span>.all(promises);\n}\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getImage<\/span>(<span class=\"hljs-params\">file<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> fReader = <span class=\"hljs-keyword\">new<\/span> FileReader();\n    <span class=\"hljs-keyword\">const<\/span> img = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'img'<\/span>);\n    fReader.onload = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n      img.src = fReader.result;\n      resolve(getBase64Image(img));\n    }\n    fReader.readAsDataURL(file);\n  })\n}\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getBase64Image<\/span>(<span class=\"hljs-params\">img<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> canvas = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'canvas'<\/span>);\n  canvas.width = img.width;\n  canvas.height = img.height;\n  <span class=\"hljs-keyword\">const<\/span> ctx = canvas.getContext(<span class=\"hljs-string\">'2d'<\/span>);\n  ctx.drawImage(img, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> dataURL = img.src;\n  <span class=\"hljs-keyword\">return<\/span> dataURL;\n}\n<span class=\"hljs-keyword\">export<\/span> { upload }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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>The code above reads the image to be uploaded, draws it into a canvas, and then converts it to a Base64 string.<\/p>\n<h3>Delay Promises<\/h3>\n<p>We want to delay the file upload for some seconds in order to see the different states change. We can do this by adding the code block below in the <code>utils.wait.js<\/code> file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">wait<\/span>(<span class=\"hljs-params\">ms<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-function\">(<span class=\"hljs-params\">x<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">resolve<\/span> =&gt;<\/span> setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> resolve(x), ms));\n  };\n}\n<span class=\"hljs-keyword\">export<\/span> { wait }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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>Bringing all these together, we can add the code block below in the <code>pages\/index.vue<\/code><\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/a9269165f91638d5dd7d3f9ae87f2abd\">https:\/\/gist.github.com\/MoeRayo\/a9269165f91638d5dd7d3f9ae87f2abd<\/a><\/p>\n<p>In the code block above, we have achieved the following:<\/p>\n<ul>\n<li>Created <code>STATUS_INITIAL<\/code>, <code>STATUS_SAVING<\/code>, <code>STATUS_SUCCESS<\/code>, and <code>STATUS_FAILED<\/code> statuses to reflect different states<\/li>\n<li>Created a <code>new FormData<\/code> to append the uploaded images<\/li>\n<li>Added a <code>save<\/code> function that calls the file upload service<\/li>\n<li>Have a <code>mounted()<\/code> hook, one of Vue\u2019s lifecycle hooks which calls the <code>reset()<\/code> method and sets the state to <code>STATUS_INITIAL<\/code>\n<\/li>\n<li>The <code>filesChange<\/code> method check for the <code>FileList<\/code> object returned by the <code>&lt;input&gt;<\/code> element, which gives us access to the image uploaded<\/li>\n<\/ul>\n<h3>Registering the States in the UI<\/h3>\n<p>With the step above, we have been able to handle the file upload. To see the changes in the UI, we will now update the HTML template of the <code>pages\/index.vue<\/code> with the following:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/6ecf42d7a1f1a7d69efc9c18ccb11a40\">https:\/\/gist.github.com\/MoeRayo\/6ecf42d7a1f1a7d69efc9c18ccb11a40<\/a><\/p>\n<p>At this stage, our UI should look like the below after a successful image upload:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657116201\/e-622f762c6cb5ad0068bc82c6\/mcmmrhai63ltvawf3oko.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1479\" height=\"595\"\/><\/p>\n<h2>Extracting Text<\/h2>\n<p>Using the Cloudinary OCR add-on, we can extract the texts from images. We will add the code below in the <code>pages\/index.vue<\/code>.<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/2ce47e5a43e273fedd1e86c455a567bb\">https:\/\/gist.github.com\/MoeRayo\/2ce47e5a43e273fedd1e86c455a567bb<\/a><\/p>\n<p><strong>NB<\/strong>: <em>Endeavor to replace all occurrences of \u201c***\u201d with the correct values.<\/em><\/p>\n<p>From the above, we achieved the following:<\/p>\n<ul>\n<li>Added <code>data<\/code> properties for managing some core Cloudinary features, namely, <code>ocr<\/code>, <code>preset<\/code>, and <code>cloudName<\/code>\n<\/li>\n<li>Added a <code>data<\/code> property for the extracted texts returned from the Cloudinary API<\/li>\n<li>Added a method, <code>detectText<\/code>, executed when the \u201c<strong>extract text<\/strong>\u201d button is triggered. This method runs the <code>prepareFormData<\/code> function that contains the form data<\/li>\n<li>Used <a href=\"https:\/\/www.npmjs.com\/package\/axios\">Axios<\/a> to post data to the Cloudinary endpoint using the request object options of the <code>url<\/code>, POST <code>method<\/code>, and the <code>formData<\/code>\n<\/li>\n<li>Used destructuring to get data back, after which the extracted text can be shown in the browser<\/li>\n<\/ul>\n<h2>Copying Text to Clipboard<\/h2>\n<p>To copy the generated text to the clipboard for easy sharing, we will modify the <code>pages\/index.vue<\/code> like so:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex flex-column flex-row-ns pa3 calisto bg-black-05 vh-100\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"w-40-l w-50-m w-100 ph3\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Extracted Text<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-light-blue br3 h-auto pa3 f4 lh-copy\"<\/span>&gt;<\/span>\n        {{detectedText}}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-black pa3 mv4 link dim br2 pointer ba b--black dib white\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"copyText\"<\/span>&gt;<\/span>{{shareText}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/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\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  \n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  data() {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">detectedText<\/span>: <span class=\"hljs-string\">''<\/span>,\n      <span class=\"hljs-attr\">shareText<\/span>: <span class=\"hljs-string\">'Copy Text'<\/span>\n    }\n  },\n  <span class=\"hljs-attr\">methods<\/span>: {\n    copyText(){\n      navigator.clipboard\n      .writeText(<span class=\"hljs-keyword\">this<\/span>.detectedText)\n      .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> (<span class=\"hljs-keyword\">this<\/span>.shareText = <span class=\"hljs-string\">'Copied!'<\/span>))\n      .catch(<span class=\"hljs-function\">(<span class=\"hljs-params\">err<\/span>) =&gt;<\/span> err)\n    }\n  }\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>At this point, our application should look like the below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1657116314\/e-622f762c6cb5ad0068bc82c6\/yltcpswy8xjajjw44t55.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1344\" height=\"651\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>This article explains how to detect and extract text from images using Cloudinary\u2019s OCR add-on.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-handle-file-uploads-in-vue-2\">Handling file uploads in Vue2<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/ocr_text_detection_and_extraction_addon\">Cloudinary\u2019s OCR text detection and extraction documentation<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27877,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,372,371],"class_list":["post-27876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-nuxtjs","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>Handle Quick AI Text Detection in Image in NuxtJS<\/title>\n<meta name=\"description\" content=\"Learn how to detect and extract text from images using Cloudinary\u2019s OCR add-on in NuxtJS\" \/>\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\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handle Quick AI Text Detection in Image in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Learn how to detect and extract text from images using Cloudinary\u2019s OCR add-on in NuxtJS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-08T07:41:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"886\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\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\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Handle Quick AI Text Detection in Image in NuxtJS\",\"datePublished\":\"2022-07-08T07:41:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"NuxtJS\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/\",\"name\":\"Handle Quick AI Text Detection in Image in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA\",\"datePublished\":\"2022-07-08T07:41:52+00:00\",\"description\":\"Learn how to detect and extract text from images using Cloudinary\u2019s OCR add-on in NuxtJS\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA\",\"width\":886,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Handle Quick AI Text Detection in Image in NuxtJS\"}]},{\"@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":"Handle Quick AI Text Detection in Image in NuxtJS","description":"Learn how to detect and extract text from images using Cloudinary\u2019s OCR add-on in NuxtJS","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\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/","og_locale":"en_US","og_type":"article","og_title":"Handle Quick AI Text Detection in Image in NuxtJS","og_description":"Learn how to detect and extract text from images using Cloudinary\u2019s OCR add-on in NuxtJS","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-08T07:41:52+00:00","og_image":[{"width":886,"height":550,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.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\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/"},"author":{"name":"","@id":""},"headline":"Handle Quick AI Text Detection in Image in NuxtJS","datePublished":"2022-07-08T07:41:52+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA","keywords":["Guest Post","Image","NuxtJS","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/","name":"Handle Quick AI Text Detection in Image in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA","datePublished":"2022-07-08T07:41:52+00:00","description":"Learn how to detect and extract text from images using Cloudinary\u2019s OCR add-on in NuxtJS","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA","width":886,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-quick-ai-text-detection-in-images-in-nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Handle Quick AI Text Detection in Image in NuxtJS"}]},{"@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\/v1681926025\/Web_Assets\/blog\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a\/c8ce5818efd0c276ee925e96bd35e6db10e9be70-886x550-1_2787784d8a.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27876","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=27876"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27876\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27877"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}