【小工具】JS+PHP实现 屏幕截图粘贴图片上传+文字识别+一键复制识别结果

今天为大家带来一款我自己写的小应用,由于最近在学习网课,而个人又是OneNote笔记爱好者,不做笔记就觉得课程学习不完整,但是懒就懒在实在不想打字啊,所以想到了直接截图用文字识别嘛,于是经过几个小时的鼓捣,这个小应用就诞生了!本着好东西要分享的原则,特意把代码贴出来并且非常欢迎大家使用我写的这个小工具~

功能介绍

当我们使用QQ、Tim、微信或者电脑自身的截图功能获取了截图后,不需要将图片保存成文件,只需在页面中的输入框中直接使用Ctrl+V或者右键粘贴就能得到剪贴板中的图片了。同时,我们会将你粘贴的图片上传到后台,调用百度AI的OCR(文字识别)接口,将图片中的文字识别并提取出来,将识别结果显示到页面上。最后,你可是一手动修改你认为识别不正确的地方,然后点击下边的按钮一键复制所有的识别结果,粘贴到你想要粘贴的任何部分!

截取并识别视频中的文字
截取并识别不可复制的文字内容
截取并识别图片中的文字

基本原理与流程

  • 使用OCR接口前,需要先请求access_token,为了避免重复请求,将其保存在session中
  • 使用JavaScript检测粘贴事件,并使用Clipboard技术获取剪贴板中的图片的Base64编码
  • 显然,获取到的Base64编码是可以用来在页面中显示图片的
  • 使用AJAX技术将Base64编码传送到后台
  • 后台获取得到图片的Base64,进行预处理,包括去掉头部信息、将AJAX传送过程中自动转换的‘+’符号从空格转换回来等
  • 将格式化好的图片的Base64编码请求百度的OCR接口返回文字识别结果
  • 将多个零散的是被内容拼合成一个完整的字符串并返回给前端,显示在页面上
  • 完成一键复制功能

实例与使用

本仓库中的代码省略了所有的样式,只保留了最简单的代码内容,一个比较好的可以运行的实例请参考笔者的个人项目。

也欢迎你收藏笔者的网站,随意使用,希望在一些情况下可以帮到你!

笔者个人的项目实例

本项目申请使用了百度OCR接口中的“通用文字识别”接口,对于准确率来讲,个人使用基本满意,可以识别不是文字不是正向的图片(即文字方向旋转也生效),不能识别手写文字,每日识别次数上线为50000次。

如果你有任何提议或问题,欢迎使用邮件和我联系:[email protected]

代码实现

具体的完整的代码实现就在这里啦:https://github.com/mhz2180572509/PasteImagetoOCR


转载请注明出处,本文永久更新链接:https://blogs.littlegenius.xin/2019/04/23/【推送】屏幕截图一键粘贴-识别图中的文字-一键复制识别结果/

你可能感兴趣的:(【小工具】JS+PHP实现 屏幕截图粘贴图片上传+文字识别+一键复制识别结果)