cs-icon.svg

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.

Note: Image OCR app does not support GIF, TIFF, PDF, JSON, and XML file formats.

Prerequisites

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

Steps for Execution

  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

    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.
      Marketplace-Icon
    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.Image-OCR-App
    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.
      6. Image-OCR-Install-App

      Note: No additional configuration is required to use the Image OCR app.

  2. Use the Image OCR app within your Stack Entry

    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.
      Image-OCR-Assets
    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.
      Image-OCR-Upload-Assets
      This adds the asset successfully.
      Image-OCR-Asset-Added
    3. Now open the newly added image and click the Widgets icon from the right navigation panel.
      Image-OCR-Widgets
    4. Select the Image OCR app from the dropdown.
      Image-OCR-Select
    5. Now, click the Extract Text And Colors button to extract text and color codes, and color ratio from the image.
      Image-OCR-Extract-Text-And-Colors-Button
      You can see the extracted Text in the Text field.
      Image-OCR-Extract-Text
      Scroll down to view the Color palette. It contains the hexadecimal code for the colors and percentages.
      Image-OCR-Extract-Colors
    6. Click Save Data to store the extracted details in the asset metadata.
      Image-OCR-Save-Data
    7. To delete the asset metadata, click the Delete Data button. After deleting, the user is redirected to the Extract Text and Colors screen.
      Image-OCR-Delete-Data.png
    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.
      Image-OCR-Save-Changes
      When you open the asset next time, you can see the updated information in the widget.
      Image-OCR-Saved-Details

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

Was this article helpful?

^