如果图像上有文字，如何在 html 页面中呈现时使图像上的文字可选择？
How to make a text on an image selectable when rendered in an html page if I have the text present on that image?
我有一张带有文本的扫描文档图像，我设法使用 Tesseract 从该图像中提取文本。但现在我想在网页上呈现此图像，从而可以 select 文档上写的文本。
我想到的一种方法是在图像顶部创建一层文本并在图像上渲染文本 canvas，但我真的不知道如何实现。
互联网上有很多这方面的例子，例如
- 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
棘手的是将识别出的单词的位置与图像位置对齐。
所以我能够解决问题，我试图从中 select 文本的书页，所有书页都有一个 XML 文件，其中包含每一行的坐标和文字。所以我所做的就是传递 selected 矩形区域的坐标，检查单词是否位于该区域内并打印出来。可以看演示here
我有一张带有文本的扫描文档图像，我设法使用 Tesseract 从该图像中提取文本。但现在我想在网页上呈现此图像，从而可以 select 文档上写的文本。 我想到的一种方法是在图像顶部创建一层文本并在图像上渲染文本 canvas，但我真的不知道如何实现。
互联网上有很多这方面的例子，例如
- 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
棘手的是将识别出的单词的位置与图像位置对齐。
所以我能够解决问题，我试图从中 select 文本的书页，所有书页都有一个 XML 文件，其中包含每一行的坐标和文字。所以我所做的就是传递 selected 矩形区域的坐标，检查单词是否位于该区域内并打印出来。可以看演示here