本文正在参加「金石计划」
以前在使用语雀文档的时候，发现一个挺好用的功能，搜索文字内容的时候，能搜索图片里的文字，之前一直很好奇，但没有去想怎么做到的，今天有空就刚好研究一下，顺便揭秘一下
示例图如下
普通页面浏览器是搜索不到图片里面的文字的，但语雀可以
原理
上传图片的时候，上传接口聚合了图片 ocr 的能力，上传成功之后，不单单会返回图片 url 地址也会返回图片里面的文字和坐标
返回坐标之后，前端会渲染文字到 DOM 节点上，浏览器就能搜索到了，分两步
- 会渲染图片，还会渲染包含文字的 mask 层（层级更高）
- 文字的坐标根据绝对定位，放到相对的位置上, 并且颜色是透明的，盖在图片上就感觉不出来
如果把透明度去掉的话是这样的
图片 ocr 是什么
图片OCR是指将包含文本的图片转换为可编辑的文本。通过使用图片OCR技术，可以将包含文本的各种图片，如扫描文档、照片、截屏等，自动转换为可编辑的文本，以便于使用和编辑。图片OCR技术依赖于先进的计算机视觉和自然语言处理技术，可以自动检测和提取图片中的文本，并将其转换为计算机可读文本。这样，可以大大提高工作效率，减少OCR工作的复杂性和繁琐性。常见的图片OCR工具包括Adobe Adobe Acrobat、ABBYY FineReader、Microsoft OneNote等。
问题
文字位置会有偏差，尤其当图片缩小的时候，会感觉搜索出来的文字很大，因为图片自适应窗口大小，但 font-size 没有动态变化
实际业务
图片的某些特殊标志或者文字，可以使用 ocr 解析出坐标，拿到图片坐标之后和业务关联起来，例如点击图片上的某个点进行链接跳转
- 车牌识别（停车场业务）
- 身份证号识别
- 题目文字识别（作业考题等）
- 论坛图片内容审核（规避涉黄等文字）
延伸，前端实现图片 ocr
拿不到文字的坐标，但阿里云有提供各种收费的 api 服务可以做到
