Image OCR App Installation Guide

Image OCR (Optical Character Recognition) allows you to extract text and colors from images. The extracted text can then be used in your website or application. The Image OCR app supports the JPEG, JPG, PNG, and SVG image formats. It can be used for applications such as automatic digitization of images, form processing, handwriting recognition, and automated translation.

With the Contentstack Marketplace Image OCR app, you can extract text and color codes with their percentages, and save them in the asset metadata within the Asset Sidebar Widget.

NoteImage OCR app does not support GIF, TIFF, PDF, JSON, and XML file formats.

• Contentstack account
• Access to the Contentstack Organization/Stack as the Owner/Admin

Let's follow this step-by-step guide to install and configure the Image OCR app within your stack.

1. Install and Configure the Image OCR app in Contentstack Marketplace
   
2. Use the Image OCR app within your Stack Entry

1. Install and Configure the Image OCR app in Contentstack Marketplace

   link

   Follow the steps to install the application in Contentstack.

   1. Log in to your Contentstack account.
   2. In the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace.
      
      Click to enlarge
   3. Click Apps from the left panel.
   4. Within the Marketplace, you can see all the available apps. Hover over the Image OCR app and click Install App.
      Click to enlarge
      
      
   5. In the popup window, select the stack where you want to install the Image OCR app, accept the terms and conditions, and click the Install button.
      
   Click to enlarge
   
   

   NoteNo additional configuration is required to use the Image OCR app.

2. Use the Image OCR app within your Stack Entry

   link

   To use the Image OCR app within your stack, follow the steps given below:

   1. Go to your stack dashboard and click the Assets icon from the left navigation panel. You can add a new image file or use an existing one.
      
      Click to enlarge
   2. To upload a new asset, click + New Asset. The Upload Asset(s) modal opens. You can upload new assets by clicking the Choose files button.
      
      Click to enlarge
      
      This adds the asset successfully.
      
      Click to enlarge
   3. Now open the newly added image and click the Widgets icon from the right navigation panel.
      
      Click to enlarge
   4. Select the Image OCR app from the dropdown.
      
      Click to enlarge
   5. Now, click the Extract Text And Colors button to extract text and color codes, and color ratio from the image.
      
      Click to enlarge
      
      You can see the extracted Text in the Text field.
      
      Click to enlarge
      
      Scroll down to view the Color palette. It contains the hexadecimal code for the colors and percentages.
      
      Click to enlarge
      
      
   6. Click Save Data to store the extracted details in the asset metadata.
      
      Click to enlarge
      
      
   7. To delete the asset metadata, click the Delete Data button. After deleting, the user is redirected to the Extract Text and Colors screen.
      
      Click to enlarge
   8. If you want to make any changes in the text, update it and click the Save Changes button to store the updated text in the asset metadata.
      
      Click to enlarge
      
      When you open the asset next time, you can see the updated information in the widget.
      
      Click to enlarge
      
      

   Additional ResourceYou can fetch the saved asset metadata using the Contentstack Delivery API. Please refer to the Get a Single Asset API documentation.