Hi Shubham,
I implemented the below link logic.
https://docs.aws.amazon.com/rekognition/latest/dg/text-detecting-text-procedure.html

Thanks,

Rakhi

Great! 

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.

Shubham 

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.

Thanks,

Rakhi

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.

Q: 

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

A: 

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:

2. 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,
  };
});

3. 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.beginPath();
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.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // Example fill color with transparency
ctx.fill();
ctx.strokeStyle = 'red'; // Example stroke color
ctx.lineWidth = 2; // Example stroke width
ctx.stroke();

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.