pdf - OCR 如何在 Google Drive 中工作？

Question

我有noticed Google 云端硬盘可以识别 PDF 中的文本(以及图像和文本文档等其他文件)。出于好奇，我想知道他们做了什么来显示可选和可搜索的 img 标签。例如，当我在 Chrome 开发者工具中检查 Google Drive 文档时，每个页面都是一个图像，但它并不像图像一样运行，因为文本是可选的。另一方面，当我放大时，似乎加载了另一张分辨率更高的图像。我认为这与 scribd 使用的技巧相同。

我还读到 Google 一直在改进 tesseract-ocr并且 Google 图书团队帮助在 Google Drive 中实现了 OCR，但我不确定以他们的方式生成 img 标签的过程是什么。

幕后发生了什么？

谢谢!

Answer 1

我不能确定到底发生了什么，但我会把我的发现告诉你。如果您查看驱动器中文件的 pdf View 的 HTML 代码，您会发现类似这样的内容。

<div id="page-pane" class="">
   <div id=":2h.page.0" class="page-element goog-inline-block" style="width: 820px;">
      <div>
         <div class="highlight-pane"></div>
         <div class="highlight-pane">
            <div class="highlight selection-highlight" style="left: 154px; top: 142px; width: 268px; height: 13px;"></div>
            <div class="highlight selection-highlight" style="left: 105px; top: 164px; width: 73px; height: 14px;"></div>
            <div class="highlight selection-highlight" style="left: 154px; top: 181px; width: 128px; height: 13px;"></div>
         </div>
         <div class="highlight-pane"></div>
         <div class="highlight-pane"></div>
         <img class="page-image" style="width: 800px; height: 1131px; display: none;" src="https://docs.google.com/file/d/0BzxfQAgMGNM6VGg4RFlBZkdoOWM/image?pagenumber=1&amp;w=138" /><img class="page-image" style="width: 800px;" src="https://docs.google.com/file/d/0BzxfQAgMGNM6VGg4RFlBZkdoOWM/image?pagenumber=1&amp;w=800" />
         <p id=":2h.a11y.0" class="accessibility-text" tabindex="-1"></p>
      </div>
   </div>

2h.page.0(pdf 的第 0 页)中有四个 highlight-pane div 和一个 img div。 img div 显示您谈论的图像。这只是一个普通的简单图像，这里没有 OCR。您提到的所选文本来自第二个 highlight-pane，当您在图像上拖动一个框时，它会动态添加 div。第二个 highlight-pane 中的三个 div 代表所选文本(对应于三行所选文本)。

当您访问页面时会发生以下情况。

• 查看存储在您驱动器中的 pdf 页面的图像。
• 您在页面上选择了一些内容。您创建了一个拖动框。
• 选择会触发在 pdf 上运行 OCR 的 javascript(可能已经计算出 OCR 输出)。
• OCR 的输出被添加到highlight-pane div 中的div