Text location on an image
Application Type
Mobile, Reactive

Hello everyone,

I'm working on a project to detect text in images and show the detected text highlighted boundaries on the screen. I also want to allow the user to select the detected text and save it to the database.

I've already implemented the text detection part and I'm able to get the bounding boxes of the detected text. However, I'm not sure how to show the highlighted boundaries on the screen and how to save the selected text to the database.  I want something like the below image.

and I'm getting these kinds of responses mentioned in the below image.




Hi Rakhi,

Glad, you have implemented this kind of functionality, but I have a question here why in response detected text as "I" it should be "IT's" right.



Hi Shubham,
I implemented the below link logic.




In above documentations it is "IT's". If you are getting correct response, so

1. Create a structure using that JSON format.

2. Next, take Server Action > use inside JSONDeserialize  and bind that structure you have created.

3. use that structure to save data as you can use loop and concat "DetectedText" field.

To highlighting boundaries still doing R&D on it but till that time you implement save functionality.

Hope you understood. Let me know if have other questions.


Hi Rakhi Chouhan, create a structure from jason and then wherever you receive this data, create a list type variable from the structure that creates this and JSONDeserialize the response from your service and the data type must be that of the structure you created, add the value of response to a variable of the structure type, then you can do what you want, just interact with the list and save the data you need.

I thought this was a CSS question so you can draw the polygon over an image. I will follow this question so I get updates. I'm not an CSS wizard myself and would like to learn this particular example :) 

I built something with JavaScript. Now I want to select the red-bordered text like Google Lens. And then I want to get the selected text value.

I'm attaching the OML for more understanding of my code. Please check the OCR2 screen logic in the oml.




I have been looking around and AWS only shows examples on how to do this in Java or Python. And I suspect you want to do this in Javascript. It will take some legwork (and I currently do not have the time to look into it) but these links should assist you in solving the issue;

BoundingBox documentation: https://docs.aws.amazon.com/rekognition/latest/APIReference/API_BoundingBox.html

How to draw a polygon on a HTML canvas (Jquery): https://stackoverflow.com/questions/34853113/drawing-multiple-polygons-in-js

I also asked ChatGPT for a solution. It looks nice but know that I have not tested this.


in html and javascript. How can I draw a polygon over an image. I do not want to use jQuery, only pure javascript. I know the coordingates of the corners as a percentage of the dimensions of the image


You can draw a polygon over an image using HTML and pure JavaScript by following these steps:

  1. Create an HTML element to hold the image and the polygon. For example:

  1. Get the dimensions of the image and calculate the coordinates of the polygon corners based on the percentage values. For example:

var image = document.getElementById('image');
var container = document.getElementById('imageContainer');
var polygon = document.getElementById('polygon');
var ctx = polygon.getContext('2d');

var imageWidth = image.clientWidth;
var imageHeight = image.clientHeight;

// Define the polygon coordinates as percentages of the image dimensions

var polygonPoints = [
  { x: 0.2, y: 0.1 }, // Example corner point
  { x: 0.5, y: 0.3 }, // Example corner point
  // Add more corner points as needed

// Calculate the polygon coordinates relative to the container dimensions
var containerWidth = container.clientWidth;
var containerHeight = container.clientHeight;
var polygonCoordinates = polygonPoints.map(function(point) {
  return {
    x: point.x * containerWidth,
    y: point.y * containerHeight,

  1. Draw the polygon on the canvas using the calculated coordinates. For example:

// Set the canvas size to match the container dimensions
polygon.width = containerWidth;
polygon.height = containerHeight;

// Clear the canvas
ctx.clearRect(0, 0, polygon.width, polygon.height);

// Draw the polygon
ctx.moveTo(polygonCoordinates[0].x, polygonCoordinates[0].y);
for (var i = 1; i < polygonCoordinates.length; i++) {
  ctx.lineTo(polygonCoordinates[i].x, polygonCoordinates[i].y);

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // Example fill color with transparency
ctx.strokeStyle = 'red'; // Example stroke color
ctx.lineWidth = 2; // Example stroke width

By following these steps, you should be able to draw a polygon over an image using pure JavaScript. Adjust the code as needed to suit your specific use case.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.