将OCR识别返回的数据渲染到pdf文件上

将OCR识别返回的数据渲染到pdf文件上，使用pdf.js心得

一、前言

因为公司业务需要，要将OCR识别pdf文件后的数据渲染到pdf文件上，框出正确的文字，如图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qNdajpgP-1687256239706)(./…/%E5%9B%BE%E7%89%87%E7%B1%BB/ocr_img/01.png)]在这里插入图片描述

此功能就如qq的屏幕识图功能，只是我只负责调用别人公司OCR接口，将他们返回的OCR数据渲染在pdf文件上。

因此我用到了pdf.js,前端使用的是react。

二、业务要求

1、禁止另存为，禁止下载，禁止打印，禁止文字选择，禁止右键菜单，禁止剪切，就只能预览，但是你要用ctrl+p打印，这个确实没办法禁用（可能是我太菜了）。

2、将ocr识别的坐标数据，渲染在pdf文件上，就如前言显示的图片一样。

三、PDF.JS操作

1、想要用pdf.js预览pdf文件，只需要使用此路径就行，path就是你的pdf文件路径。

 url = "/web/libs/pdfjs/web/viewer.html?file=" + path（你的pdf文件路径）

2、我是使用iframe标签展示pdf文件的，并且也想提一嘴儿，iframe标签的高度宽度得固定，不然它默认高度为200px，而且如果iframe高度不固定的话，到时候渲染ocr的坐标时，会出现位移的情况。

3、禁止另存为，禁止下载，禁止打印，禁止文字选择，禁止右键菜单，禁止剪切，如图所示，在下载好的pdf.js文件下 pdfjs/web/viewer.html 有个viewer.html添加下面代码即可。

但尽管如此，在预览里面还是有按钮，所以，我就得把这些按钮隐藏掉，也在viewer.html里面，在标签里面加style=“display:none” 即可，选择你想要隐藏的按钮，你甚至可以隐藏掉上面的工具栏。

四、OCR坐标操作

1、返回的坐标数据如下：（我只取了部分），返回的数据是需要遍历的

"points": [
{"x": 108,"y": 298},{"x": 218,"y": 298},{"x": 218,"y": 316},{"x": 108,"y": 316}
]

2、我先说说我的思路，是如何用这些坐标框住这些文字,

①、要知道我用的是iframe标签来预览pdf，所以我得获取到里面pdf文件

这串代码其实获取的就是viewer.html，也就是pdf

document.getElementById("iframeId").contentDocument

然后，我是找到viewer.html里的canvas标签，pdf.js展示pdf文件的时候，就是把pdf转为了图片！

到这里思路就清晰多了，我用过canvas直接写坐标的方式套用，虽然能框住字，但是无法实现鼠标失去焦点的样式，所以我用了div标签在canvas上面覆盖了一层，div标签就是红色框框

虽然能框住了字，但是一旦缩放，这些div标签就会消失，所以我还在pdf.js里面动了手脚，让他无法缩放，

这里就得去看viewer.js了

关键代码是：

PDFViewerApplication.unbindEvents();
PDFViewerApplication.unbindWindowEvents();

至此，功能的大概思路就是这样，如果还有更好的思路希望能提供！多多交流！还有不懂的评论区说出问题，还有哪些知道的细节都可以在评论区评论！
ts();

至此，功能的大概思路就是这样，如果还有更好的思路希望能提供！多多交流！还有不懂的评论区说出问题，还有哪些知道的细节都可以在评论区评论！