I have an image of a scanned document with text, and I managed to extract text from that image using Tesseract. But now I want to render this image on a webpage making it possible to select the text written on the document. One approach I had in mind was to create a layer of text on top of the image and render text over the image canvas, but I don't really know how to make this possible.
2 Answers
So I was able to solve the problem, the book pages I was trying to select text from, had an XML file for all the book pages, which contains the coordinates for each line and words. So all I did was pass the coordinates of a selected rectangular region, checked if the words are lying within that region and printed them. You can see the demo here
There are plenty examples for this on internet e.g.
- https://www.w3schools.com/howto/howto_css_image_text.asp
- How to put text over images in html?
- https://pavenum.com/en/images-and-text-overlays-in-html-css
Tricky would be align position of recognized words to image position.
Related