logo
0
0
WeChat Login
gtjyj<190316516@qq.com>
初始版本提交

img-ocr-text-copy 图片文字识别支持复制

介绍

心血来潮想实现以下tapd中,在web查看一个图片时,鼠标划入文字,可以复制的功能。因此做了这个demo项目,目前还存在一些问题。

预览

预览

之所以说它是个demo,因为并没有封装成npm包,最终形态应该是弹出一个窗口预览图片,然后鼠标划入文字,可以复制文字,可以滚轮缩放图片,并且解决文字定位的问题。

存在的问题

  • 本地OCR文字识别率有些许问题,用的tesseract.js
  • 文字在图片上为的位置还原有问题,主要是识别文字字号及中间空白的宽度困难

运行流程

  1. 安装依赖 pnpm i ,如果没有pnpm请先安装它 npm i pnpm -g
  2. 启动服务端 pnpm start:server
  3. 启动客户端 pnpm start:web
  4. 浏览器访问 localhost:7000

其他

  1. 如果要用腾讯云的OCR服务,请填写 /packages/server/.env 文件中的secretId和secretKey,否则调用会报错。
  2. 服务端端口号也在.env文件中,如果修改了端口号,还需要修改 /packages/web/.env 中的server地址的端口号。

欢迎fork后修改、测试