Как сделать так, чтобы текст на изображении можно было выбирать при отображении на странице html, если у меня есть текст на этом изображении?

Question

У меня есть изображение отсканированного документа с текстом, и мне удалось извлечь текст из этого изображения с помощью Tesseract. Но теперь я хочу отобразить это изображение на веб-странице, чтобы можно было выделить текст, написанный на документе. Один из подходов, который я задумал, состоял в том, чтобы создать слой текста поверх изображения и визуализировать текст поверх холста изображения, но я действительно не знаю, как это сделать.

Answer 1

Таким образом, я смог решить проблему, страницы книг, из которых я пытался выбрать текст, имели файл XML для всех страниц книги, который содержит координаты для каждой строки и слов. Поэтому все, что я сделал, это передал координаты выбранной области прямоугольника angular, проверил, лежат ли слова в этой области, и распечатал их. Вы можете увидеть демо здесь

Answer 2

Есть много примеров для этого на inte rnet например

• https://www.w3schools.com/howto/howto_css_image_text.asp
• Как поместить текст поверх изображений в html?
• https://pavenum.com/en/images-and-text-overlays-in-html-css

Сложно было бы выровнять положение распознанных слов по положению изображения.